写几个简单用artTemplate的例子
2024-08-26 19:49:08
写几个简单的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){}}
});
几个小例子；
最新文章
- MessageBox的常用方法
- 用Java写算法之归并排序
- Strophe.js连接XMPP服务器Openfire、Tigase实现Web私聊、群聊(MUC)
- 【web前端面试题整理07】我不理解表现与数据分离。。。
- visual studio 远程服务器返回了意外响应:(417)expectation failed
- js 调用IE内置打印控件
- Golang－interface（四 反射）
- Android开源代码解读-基于SackOfViewAdapter类实现类似状态通知栏的布局
- innodb引擎redo文件维护
- win10 64位下装Virtual Box安装Linux（centOS）配置联网
- 掌握numpy(二)
- 联想G510 在新的SSD上安装Win8.1系统，启动的时候自己加载机械硬盘的Win8.1系统
- JavaScript设计模式Item 1—多态
- 《深入理解Java虚拟机》-----第7章 虚拟机类加载机制——Java高级开发必须懂的
- 948. Bag of Tokens
- docker容器访问宿主机IP
- C++反汇编调试
- leetcode每日刷题计划-简单篇day7
- IISEXPRESS64位运行
- 如何查找物理cpu，cpu核心和逻辑cpu的数量
热门文章
- 《Java并发编程实战》第八章 线程池的使用 读书笔记
- open() 函数以 r+ 模式打开文件
- Cocos Studio编辑器运行日志路径
- 获取jqGrid中选择的行的数据以及 jqGrid获得所有行数据的方法
- Assembly中Load, LoadFrom, LoadFile以及AppDomain, Activator类中相应函数的区别
- 【BZOJ3289】Mato的文件管理 莫队算法+树状数组
- kafka 相关配置
- 按批次处理list数据 (list按条数取)
- 修改\Servlet和Jsp模板的方法
- 报错分析---->jsp自定义标签：Unable to load tag handler class