写几个简单用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 ...
随机推荐
- （转）spring IOC、DI理解
转自: http://www.cnblogs.com/xdp-gacl/p/4249939.html 个人理解: IOC控制反转,反转的是获取依赖对象的方式.传统的应用在存在依赖关系时,比如A依赖于B ...
- error C2678: 二进制“+”: 没有找到接受“const char [22]”类型的左操作数的运算符(或没有可接受的转换)没有与这些操作数匹配的“+”运算符
错误:没有与这些操作数匹配的“+”运算符,操作数类型为const char [20]+CString 分析原因:其提示操作数类型为const char [20]+CString 可见是类型有问题 故加 ...
- CENTOS --5分钟搞定Nginx安装的教程
1. 安装gcc(centos 7之后一般已自带,可以在第6步失败后再安装) yum install gcc gcc-c++ 2. 安装pcre yum install -y pcre pcre-de ...
- windows下查看dns缓存和刷新缓存
ipconfig /displaydns 显示已有缓存,可能比较大建议 ipconfig /displaydns > C:\Users\SDWQ\Desktop\1.txt 再查看. 强制更新缓 ...
- jQuery插件手把手教会（一）
jQuery插件开发教程 ——让你的jQuery水平提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...
- OSG四元数与欧拉角之间的转换
osg::Quat HPRToQuat(double heading, double pitch, double roll) { osg::Quat q( roll, osg::Vec3d(0.0, ...
- 第十篇：Linux中权限的再讨论( 上 )
前言 在Linux系统中,用户分为 个权限位.好了,很多朋友对于Linux权限的了解就仅限于此了.但,Linux目录权限和文件权限一样吗?内核对于权限的检查过程又是怎样的? 如果你不清楚,本文将为你解 ...
- angular的属性绑定
1. 图片地址属性绑定 html文件 <img [src]="imgUrl"> ts文件 export class ProductComponent implement ...
- 区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法
HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...
- 启动windows服务的bat文件编写格式
1.bat文件需要和bin文件内容放在一起 启动服务的bat文件如下: sc create 邮件服务 binPath= "%~dp0可执行文件名称.exe" start= auto ...