写几个简单用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 ...
随机推荐
- （转）word尾注引文添加方式及相关问题
word引文添加方式:http://www.office68.com/word/word-reference-add.html word通配符:http://www.3lian.com/edu/201 ...
- w.5 Y k J.COm 9 如何做好总经理助理
总经理助理的工作职责:(指要做的事—做事的责任) 忠诚的总管家----总经理的代言人和执行官. 总经理助理一方面要为企业发展运筹帷幄,另一方面更要分担繁重的行政事务,所以他务必履行对该职业的使命感. ...
- Object和Function谁先被创建
http://bbs.csdn.net/topics/390772104#post-397284029
- 机器学习（Machine Learning）
机器学习(Machine Learning)是一门专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能的学科.
- Python学习笔记4—列表List
列表定义 Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. >>> a=['] >>> type(a) &l ...
- 解决ScrollView滑动RecyclerView的卡顿
我们不的不了解ViewConfiguration这个类,官方是这么解释的Contains methods to standard constants used in the UI for timeou ...
- IOS 程序内部切换语言 的一种方法
本文转载至 http://www.cnblogs.com/wuyijibei/archive/2013/08/01/3230468.html 1: 首先, 所有的语言资源还是需要和现在的i18n方法 ...
- Windows电脑键盘快捷键大全【最全的快捷键】
Windows电脑键盘快捷键大全[最全的快捷键] 一.常见用法: F1显示当前程序或者windows的帮助内容. F2当你选中一个文件的话,这意味着“重命名” F3当你在桌面上的时候是打开“查找:所有 ...
- HDU1080(DP)
我用的dp是n^3的, dp[i][j] 表示在s串的i个前和t串的j个前,s[i],t[j]为最末端的两个串得到的最大值. 状态转移方程为: 之前将s和t串最尾端添加'-' ;i<=n;i++ ...
- WebAPI学习日记一：Ajax请求传递参数遇到的问题
首先,本人大学刚毕业,想把自己学习的一些东西记录下来,也是和大家分享,如有不对之处还请多加指正.声明:但凡是我博客里的文章均是本人实际操作遇到的例子,不会随便从网上拷贝或者转载,本着对自己和观众负责的 ...