写几个简单的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){}} });
几个小例子；