寫幾個簡單用artTemplate的例子
阿新 • • 發佈：2018-01-19
ets lpar icheck security 支持 新版 render sts 手機號換綁
寫幾個簡單的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的例子