写几个简单用artTemplate的例子
写几个简单的artTemplate的例子，很多框架都有自己的模板（template），没得时候，可以利用artTemplate.js完成
html文件是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="commonBus">
<div id="baseBus"></div> <div id="packBus"></div>
<script id="pack" type="text/html">
{{each list as value i}}
<span>{{value}}</span>
{{/each}}
</script> <!-- 简单语法 -->
<DIV id="changebUS"></DIV>
<script id="change" type="text/html">
{{each list}}
<span>{{$index+1}}:{{$value}}</span>
{{/each}}
</script> <!-- 原生语法略 -->
</div>
<script type="text/javascript" src="src/lib/require.js"></script>
<script type="text/javascript" src="src/ajaxGetHtmlAppendDiv.js"></script>
</body>
</html>
js文件是：
require.config( {
baseUrl: "./src",
paths: {
//公共路径开始
ui: "../src/ui",
util: "../src/util",
modules: "../src/modules",
common: "../src/common",
service:"../src/service",
bower_components:"../bower_components",
//公共路径结束
//公共JS开始
bootstrap:"../src/lib/bootstrap.min",
dateutil:"../src/lib/dateutil",//公用日期工具
route:"../src/lib/director",//公用路由。。去掉以前内个自己写的路由
jquery:"../src/lib/jquery.min",//jquery
es5shim:"../src/lib/es5-shim.min",//兼容IE8的一些ECMASCRIPT5的一些方法
bs_pagination:"../src/lib/jquery.bs_pagination",
template:"../src/lib/template",
dialog:"../src/lib/dialog-plus",
icheck: "../src/lib/icheck",
encoder: "../src/lib/encoder",
shiroTrie: "../src/lib/shiro-trie"
},
shim: {
bootstrap: {
deps: ["jquery"]
},
bs_pagination: {
deps: ["jquery"]
},
dialog: {
deps: ["jquery"]
},
icheck: {
deps: ["jquery"]
}
},
waitSeconds: 15//加载时间为15秒。。。。15秒还加载不到。。可以放弃了
});
//配置路由
require(["jquery","route","dialog","util/storage","template","util/permissionValidator","bootstrap","es5shim"],function($,Route,dialog,storage,template,permissionValidator){
var container = $("#commonBus");
// $.ajax({
// url:"src/modules/error/forbidden403.html",//"src/modules/" + filePath + "/index.html",//"src/modules/error/forbidden403.html"
// contentType:"text/html",
// success:function(template){
// console.info(template);
// // container.append(template);//，支持html类型，不会转译，当做标签来解析，text就当做文本
// }
// });
var baseBus = $("#baseBus");
var data ={
respInfo : [{class:'one',iconUrl:'myunicode',appName:'我的一码通'},
{class:'two',iconUrl:'change',appName:'证券持有变更'},
{class:'three',iconUrl:'left',appName:'证券持有余额'},
{class:'fourth',iconUrl:'frozeen',appName:'证券冻结查询'},
{class:'five',iconUrl:'tax',appName:'股息红利个人所得税'}]
}
var wxapp = '{{each respInfo as value i}}'+
'<li class='+'{{value.class}}'+'>' +
'<a href="javascript:void(0)">' +
'<div class="legend {{value.iconUrl}}" >'+
'</div>'+
'<div class="title">'+
'<h5>{{value.appName}}</h5>'+
'</div>'+
'</a>'+
'</li>'+
'{{/each}}';
// var renderwxapp = template.compile(wxapp);
// var html = renderwxapp(data);
// var html=template.compile(wxapp)(data);//template.compile(wxapp)(data)返回值是函数,编译这段拼接的代码
var html=template.render(wxapp)(data);//template.render(wxapp)(data)返回值是函数,编译这段拼接的代码
baseBus.html( "" );
baseBus.html(html);
var packdata ={
list:['one','two','three','fourth']
}
var packhtml = template('pack',packdata);//template("id名字",data填充数据)，用于模板
$("#packBus").html(packhtml);
var changedata ={
list:['one11','two11','three11','fourth11']
}
var changehtml = template('change',changedata);
$("#changebUS").html(changehtml);
var routePathMap = {
'#/index': {'path':'investor/member/memberIndex','permissions':['portal:common']},
'#/card' : {'path':'portal/findPwd/cardMsgTip','slashParam':true,'queryParam':true,},
'#/resetPwd' : {'path':'memberc/accountmember/accountEditPwd','permissions':['portal:common']},
'#/member' : {'path':'investor/member/memberIndex','permissions':['portal:common']},
'#/register':{'path':'portal/register/regist'},//新版注册页面 PAN-Z-G
'#/serviceProcess':{'path':'portal/register/protocal'},//新版注册须知 PAN-Z-G
'#/serviceAgreements':{'path':'portal/register/ol_reginfo'},//新版网络服务协议 PAN-Z-G
/**
* 设置密保问题首页 PAN-Z-G
*/
'#/secuIssues':{'path':'memberc/accountmember/setIssues'
,'permissions':['portal:common']},
/**
* 设置密保问题成功页 PAN-Z-G
*/
'#/secuIssuesSucc':{'path':'memberc/accountmember/securityIssuesSucc'
,'permissions':['portal:common']},
/**
* 激活基金账户 PAN-Z-G
*/
'#/fundAuth':{'path':'portal/fundAuth/fundAuth'
,'permissions':['portal:common']},
/**
* 新版小白注册成功页面 PAN-Z-G
*/
'#/registerSucc':{'path':'/register/registSuccess'},
/**
* 新版绑定一码通页面 PAN-Z-G
*/
'#/bindUniq':{'path':'memberc/accountmember/account'
,'permissions':['portal:bind:uniq']},
/**
* 新版交易报盘_激活页面 PAN-Z-G
*/
'#/tradeAuth':{'path':'memberc/accountmember/accountDealActive'
,'permissions':['portal:bind:trade']},
/**
* 新版交易报盘_验证完成页面 PAN-Z-G
*/
'#/tradeAuth_succ':{'path':'memberc/accountmember/accountDealOver'
,'permissions':['portal:bind:trade']},
/**
* 新版手机号_验证页面 PAN-Z-G
*/
'#/mobileAuth':{'path':'memberc/accountmember/accountEcodeActive'
,'permissions':['portal:bind:mobile']},
/**
* 新版手机号_验证完成页面 PAN-Z-G
*/
'#/mobileAuth_succ':{'path':'memberc/accountmember/accountEcodeOver'
,'permissions':['portal:bind:mobile']},
/**
* 新版认证_验证页面 PAN-Z-G
*/
'#/counterAuth':{'path':'memberc/accountmember/accountCardActive'
,'permissions':['portal:bind:counter']},
/**
* 新版认证_完成页面 PAN-Z-G
*/
'#/counterAuth_succ':{'path':'memberc/accountmember/accountCardOver'
,'permissions':['portal:bind:counter']},
'#/p_fundAuth':{'path':'memberc/accountmember/fundAuth'
,'permissions':['portal:common']},
'#/findPwd':{'path':'portal/findPwd/findPassword'}, //忘记密码 lk
'#/f_info':{'path':'portal/findPwd/bindFind'}, //绑定一码通 lk
'#/f_authBindFind':{'path':'portal/findPwd/authBindFind'},
'#/f_addMobile':{'path':'portal/findPwd/unBindFind'}, //未绑定一码通 lk
'#/f_verifyMobile':{'path':'portal/findPwd/editCode'}, //获取手机验证码 lk
'#/f_resetPwd':{'path':'portal/findPwd/setNewPhone'}, //重设密码 lk
'#/f_otherWay':{'path':'portal/findPwd/otherWay'}, //其他方式页面
'#/f_pwdProtection':{'path':'portal/findPwd/issuesPwd'}, //密保问题页面
'#/f_securitySetPwd':{'path':'portal/findPwd/securitySetPwd'}, //密保问题设置密码页面
'#/f_tradeAuth':{'path':'portal/findPwd/dealSetPwd'}, //交易报盘_验证页 lk
'#/f_tradeAuth_succ':{'path':'portal/findPwd/dealMsgTip'},//交易报盘_完成页 lk
'#/f_counterAuth':{'path':'portal/findPwd/cardSetPwd'},//身份验证机构 lk
'#/f_counterAuth_succ':{'path':'portal/findPwd/cardMsgTip'},//身份验证机构_完成页 lk
'#/f_veriFundInfo':{'path':'portal/findPwd/bindFundFind'},
'#/f_fundAuth':{'path':'portal/findPwd/fundShareCert'},
'#/f_findPwdSucc':{'path':'portal/findPwd/findPwdSucc'},
'#/registerSucc':{'path':'portal/register/registSuccess'},
'#/bindNewMobile' : {'path':'memberc/accountmember/memberBindPhone', 'permissions':['portal:common']},//通过手机号换绑新手机 yhb
'#/p_tradeAuth' : {'path':'memberc/accountmember/dealBindPhone', 'permissions':['portal:trade']},//通过交易报盘修改手机 yhb
'#/p_tradeAuth_succ' : {'path':'memberc/accountmember/dealBindOver', 'permissions':['portal:trade']},//交易报盘修改手机成功页 yhb
'#/p_counterAuth' : {'path':'memberc/accountmember/cardBindPhone', 'permissions':['portal:counter']},//通过身份机构认证修改手机 yhb
'#/p_counterAuth_succ' : {'path':'memberc/accountmember/cardBindOver', 'permissions':['portal:counter']},//身份认证机构修改手机成功页 yhb
'#/personalCenter': {'path':'memberc/accountmember/memberCenter','tabFlag':true, 'permissions':['portal:common']},
'#/o_resetPwd': {'path':'portal/userLogin/changePwd', 'permissions':['portal:mig:pwd']},//老用户弱密重设 yhb
'#/o_addMobile': {'path':'portal/userLogin/setPhone', 'permissions':['portal:mig:mobile']},//老用户重设手机 yhb
'#/o_migComplete': {'path':'portal/userLogin/setSuccess', 'permissions':['portal:common']},//老用户迁移成功 yhb
'#/p_chgPhoneSucc' : {'path':'memberc/accountmember/chgPhoneSucc', 'permissions':['portal:common']}
};
function createRouteDic(routePathMap, routeHandler){
var routeDic = {},
url = null;
for(key in routePathMap){
url = key.substr(1);
if(routePathMap[key].slashParam && !routePathMap[key].queryParam){
url = key.substr(1) + '/([0-9]*)';
}
if(routePathMap[key].slashParam && routePathMap[key].queryParam){
url = key.substr(1) + '/((\w|.)*)';
}
if(routePathMap[key].tabFlag && !routePathMap[key].slashParam && !routePathMap[key].queryParam){
url += '\\|?((\w|.)*)';
}
routeDic[url] = routeHandler;
}
return routeDic;//对象 键：方法
}
createRouteDic(routePathMap);
function routeHandler(param){
//获取当前路由条目
var urlInfo = getUrlInfoFromRoutePathMap(param);
var fixedUrlPart = urlInfo.url,
filePath = urlInfo.path;
urlPermissions = urlInfo.permissions || [];
var head = filePath.split('/')[0],
business = filePath.split('/')[1];
//获取用户角色
currentUserRoles = userInfo.fullRoles || [];
currentUserPermissions = userInfo.permissions || [];
//老用户强制跳转 MIG_USER存在 #/o_不存在
if(currentUserRoles.indexOf('MIG_USER') > -1 && fixedUrlPart.indexOf('#/o_') < 0){
window.location.href = _http_error_statues.web_service_url+_http_error_statues.web_service_name+"userMigCenter/invUserRedirect";
return;
}
//加载头部及菜单栏
navMenus.initMenus(container, userInfo,urlInfo);
//加载导航下部的页面
$.ajax({
url:"src/modules/" + filePath + "/index.html",
contentType:"text/html",
success:function(template){
if(navMenus.hasRightContainer()){
var rightContainer = $('#rightContainer');
rightContainer.html(template);
}else{
container.html(template);
}
//加载业务js文件
require(["modules/" + filePath + "/index"],function(index){
index(container, param, userInfo);
});
},
error: function redirectToNotFoundPage(){
$.ajax({
url:"src/modules/error/error404.html",
contentType:"text/html",
success: function(template){
container.html(template);
}
})
}
});
};
// {
// "#/index": "/index",
// "#/card": "/card/((w|.)*)",
// "#/resetPwd": "/resetPwd", "memberc/accountmember/accountEditPwd"
// "#/member": "/member",
// "#/register": "/register",
// "#/serviceProcess": "/serviceProcess",
// "#/serviceAgreements": "/serviceAgreements",
// "#/secuIssues": "/secuIssues",
// "#/secuIssuesSucc": "/secuIssuesSucc",
// "#/fundAuth": "/fundAuth",
// "#/registerSucc": "/registerSucc",
// "#/bindUniq": "/bindUniq",
// "#/tradeAuth": "/tradeAuth",
// "#/tradeAuth_succ": "/tradeAuth_succ",
// "#/mobileAuth": "/mobileAuth",
// "#/mobileAuth_succ": "/mobileAuth_succ",
// "#/counterAuth": "/counterAuth",
// "#/counterAuth_succ": "/counterAuth_succ",
// "#/p_fundAuth": "/p_fundAuth",
// "#/findPwd": "/findPwd",
// "#/f_info": "/f_info",
// "#/f_authBindFind": "/f_authBindFind",
// "#/f_addMobile": "/f_addMobile",
// "#/f_verifyMobile": "/f_verifyMobile",
// "#/f_resetPwd": "/f_resetPwd",
// "#/f_otherWay": "/f_otherWay",
// "#/f_pwdProtection": "/f_pwdProtection",
// "#/f_securitySetPwd": "/f_securitySetPwd",
// "#/f_tradeAuth": "/f_tradeAuth",
// "#/f_tradeAuth_succ": "/f_tradeAuth_succ",
// "#/f_counterAuth": "/f_counterAuth",
// "#/f_counterAuth_succ": "/f_counterAuth_succ",
// "#/f_veriFundInfo": "/f_veriFundInfo",
// "#/f_fundAuth": "/f_fundAuth",
// "#/f_findPwdSucc": "/f_findPwdSucc",
// "#/bindNewMobile": "/bindNewMobile",
// "#/p_tradeAuth": "/p_tradeAuth",
// "#/p_tradeAuth_succ": "/p_tradeAuth_succ",
// "#/p_counterAuth": "/p_counterAuth",
// "#/p_counterAuth_succ": "/p_counterAuth_succ",
// "#/personalCenter": "/personalCenter\\|?((w|.)*)",
// "#/o_resetPwd": "/o_resetPwd",
// "#/o_addMobile": "/o_addMobile",
// "#/o_migComplete": "/o_migComplete",
// "#/p_chgPhoneSucc": "/p_chgPhoneSucc"
// }
//createRouteDic()
//返回
// var routeDic ={ "/o_migComplete":function(param){},
// { "/p_chgPhoneSucc":function(param){}}
});
几个小例子；
写几个简单用artTemplate的例子的更多相关文章
- 用qpython3写一个最简单的发送短信的程序
到目前为止并没有多少手机应用是用python开发的,不过qpython可以作为一个不错的玩具推荐给大家来玩. 写一个最简单的发送短信的程序,代码如下: #-*-coding:utf8;-*- #qpy ...
- [转]一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程
一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程 希望此文能给初学多线程编程的朋友带来帮助,也希望牛人多多指出错误. 另外感谢以下链接的作者给予,给我的学习带来了很大帮助 http ...
- 2.简单的Code First例子（EF Code-First系列）
现在假想,我们想要为讴歌学校创建一个应用程序,这个程序需要能够来添加或者更新学生,分数,教师还有课程信息. 代替之前我们的做法:先是创建数据库,现在我们不这么做,我们先来创建领域类,首先我来创建两个简 ...
- 只是一个用EF写的一个简单的分页方法而已
只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...
- 一个简单的iBatis入门例子
一个简单的iBatis入门例子,用ORACLE和Java测试 目录结构: 1.导入iBatis和oracle驱动. 2.创建类Person.java package com.ibeats;import ...
- 【spring】-- 手写一个最简单的IOC框架
1.什么是springIOC IOC就是把每一个bean(实体类)与bean(实体了)之间的关系交给第三方容器进行管理. 如果我们手写一个最最简单的IOC,最终效果是怎样呢? xml配置: <b ...
- 写了一个简单的CGI Server
之前看过一些开源程序的源码,也略微知道些Apache的CGI处理程序架构,于是用了一周时间,用C写了一个简单的CGI Server,代码算上头文件,一共1200行左右,难度中等偏上,小伙伴可以仔细看看 ...
- tcp窗口机制（写的最简单精炼的文章）
tcp窗口机制(写的最简单精炼的文章) http://blog.csdn.net/occupy8/article/details/48468445
- 自己写的一个简单PHP采集器
自己写的一个简单PHP采集器 <?php //**************************************************************** $url = &q ...
随机推荐
- 【cb2】扩展硬盘
1.硬盘为sata串口 2.参考 http://docs.cubieboard.org/tutorials/ct1/installation/moving_rootfs_from_nandflash_ ...
- 有用的Python代码片段
我列出的这些有用的Python代码片段,为我节省了大量的时间,并且我希望他们也能为你节省一些时间.大多数的这些片段出自寻找解决方案,查找博客和StackOverflow解决类似问题的答案.下面所有的代 ...
- Object和Function谁先被创建
http://bbs.csdn.net/topics/390772104#post-397284029
- 学习《深入理解C#》—— 可空类型、可选参数和默认值 (第一章1.3)
目录 C#可空类型 C# 可选参数和默认值 C# 可空类型 在日常生活中,相信大家都离不开手机,低头族啊!哈哈... 假如手机厂商生产了一款新手机,暂时还未定价,在C#1中我们该怎么做呢? 常见的解决 ...
- js实现jquery的offset()
用过jQuery的offset()的同学都知道 offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop ...
- SQLServer------数据类型在C#中的转换
SQL C#tinyint bytesmallint Int16char stringint int
- 杭电 1280 前m大的数
http://acm.hdu.edu.cn/showproblem.php?pid=1280 前m大的数 Time Limit: 2000/1000 MS (Java/Others) Memor ...
- iOS开发之--NSData与UIImage之间的转换
//NSData转换为UIImage NSData *imageData = [NSData dataWithContentsOfFile: imagePath]; UIImage *image = ...
- Codeforces Round #190 (Div. 2).D
一道贪心题. 可以分两种情况 1 .是没有把对面的牌全打败,那么只要用最大的可能去打攻击状态的牌. 2. 是将对面的牌全打败,那么只要保证打对面防守状态的花费最小,就可以保证最后的结果最大 两种情况下 ...
- 【BZOJ2801】[Poi2012]Minimalist Security BFS
[BZOJ2801][Poi2012]Minimalist Security Description 给出一个N个顶点.M条边的无向图,边(u,v)有权值w(u,v),顶点i也有权值p(i),并且对于 ...