http://www.cnblogs.com/guohu/p/3870677.html这篇博客对比了各种模板引擎的速度 最后还是选择artTemplate.js来展示数据
1.这里模板引擎我在项目中的使用
<ul class="flag-list clearfix" id="teamsHtml">
<script id="teamsData" type="text/html">
<% for(var i = 0; i < result.length; i++) { %>
<li>
<div class="flag-img"><img src="<%=result[i].logo %>" alt="" class="ie6png" /></div>
<p><input type="checkbox" name="teamStrong"/></p>
<p class="flag-name"><%=result[i].team %></p>
</li>
<% } %>
</script>
</ul>
function getTeams() {
WebsiteAjax.getInstance({
ajaxUrl : urlPrefix + "team/getTeams",
type : "GET",
dataType : "JSONP",
succesMethod : function(data, textStatus) {
var html = template.render("teamsData", data);
$("#teamsHtml").html(html);
},
errorCallMethod : function(data, status) {
},
errorMethod : function() {
}
});
} 在<script></script>标签中要注意的是可以直接使用data对象的属性 我的data对象装的是List<?>类型的属性名是result,则可以直接循环result对象来进行数据展示
2.下面的代码是有if判断的写法，可以参考一下
<script id="preVerusesData" type="text/html">
<% for(var i = 0; i < result.length; i++) { %>
<li>
<div class="contest-team">
<span style="white-space:pre"> </span> <span class="contest-match w102">
<span style="white-space:pre"> </span><img src="<%=result[i].team1_logo %>" alt="" class="ie6png" />
<p class="match-name f14 fb"><%=result[i].team1_name %></p>
</span>
<em class="contest-vs w56 fb">VS</em>
<span class="contest-match w102">
<span style="white-space:pre"> </span> <img src="<%=result[i].team2_logo %>" alt="" class="ie6png" />
<p class="match-name f14 fb"><%=result[i].team2_name %></p>
</span>
</div>
<div class="contest-score f14">
<span style="white-space:pre"> </span></span><span class="w102"><input type="radio" name="pk_date<%=i%>" value="radio" <%if(result[i].pk_result == 3){%><%='checked'%><%}%> /><br/>胜</span>
<span class="w56"> <input type="radio" name="pk_date<%=i%>" value="radio" <%if(result[i].pk_result == 2){%><%='checked'%><%}%> /><br/>平</span>
<span class="w102"><input type="radio" name="pk_date<%=i%>" value="radio" <%if(result[i].pk_result == 1){%><%='checked'%><%}%> /><br/>负</span>
</div>
</li>
<% } %>
</script>3.下面是artTemplate外部函数的调用针对日期格式的处理
/**
* 对日期进行格式化，
* @param date 要格式化的日期
* @param format 进行格式化的模式字符串
* 支持的模式字母有：
* y:年,
* M:年中的月份(1-12),
* d:月份中的天(1-31),
* h:小时(0-23),
* m:分(0-59),
* s:秒(0-59),
* S:毫秒(0-999),
* q:季度(1-4)
* @return String
* @author yanis.wang
* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
*/
template.helper('dateFormat', function (date, format) {
date = new Date(date);
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t){
var v = map[t];
if(v !== undefined){
if(all.length > 1){
v = '0' + v;
v = v.substr(v.length-2);
}
return v;
}
else if(t === 'y'){
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
});
<script id="lastestLotteryData" type="text/html">
<% for(var i = 0; i < result.length; i++) { %>
<li><span class="t1"><%=result[i].player %></span><span class="t2"><%=dateFormat(result[i].date, 'yyyy-MM-dd')%></span><span class="t3">获得【<%=result[i].soccerlotteryPrize%>】</span></li>
<% } %>
</script>
arttemplate.js的简洁语法是不支持用自定义变量的比如想for循环i 这样就不支持,但是如果想在jsp页面使用<%%>如此的语法又会和jsp命令产生冲突，这时候就需要修改arttemplate.js的源码修改开始标签和结束标签
template.openTag = "<$";
template.closeTag = "$>";
如此修改后就不会与后端语言产生冲突了
4.下面是用也是对模板引擎使用的例子
<script type="text/html" id="moreCompareData">
<tbody class="comparison_more" >
<tr class="play_top">
<$for(i = 0; i < roleWeekRanks.length;i++) {$>
<td class="td<$=roleWeekRanks[i].accountid$>"><$=roleWeekRanks[i].name$><sup οnclick="delCompare('<$=roleWeekRanks[i].accountid$>')"><a href="javascript:;"><img src="/img/close_ico.png" class="ie6png" title="关闭" /></a></sup></td>
<$}$>
</tr>
<$for(j = 0;j < maxs.length;j++) {$>
<tr>
<$for(k = 0; k < roleWeekRanks.length;k++) {$>
<td class="td<$=roleWeekRanks[k].accountid$> <$if(roleWeekRanks[k][maxs[j].key] == maxs[j].val && maxs[j].key != 'vehicleName') {$><$='color_g'$><$}$>"><$=roleWeekRanks[k][maxs[j].key]$></td>
<$}$>
</tr>
<$}$>
</tbody>
</script>该例子里面演示了roleWeekRanks[k].属性 也可以用roleWeekRanks[k][属性]的方式来获取值
5.下面演示了模板切换报错的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content='最后一炮,最后一炮官网,FF,最后一炮激活码,最后一炮下载,finalfire' />
<meta name="description" content='《最后一炮》（别名FF或finalfire）最新3D载具射击巨制，海陆空竞技，开启载具射击网游革命。中国现役及世界尖端装备亮相，动态战场，物理拟真系统，全场景破坏，高'/>
<script src="template-native.js"></script>
<script src="http://static.zqgame.com/js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="content">
<script id="test1" type="text/html">
<% for(i = 0; i < list.length; i ++) {%>
<li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
<% } %>
</script>
<script id="test2" type="text/html">
<% for(i = 0; i < list.length; i ++) {%>
<li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
<% } %>
</script>
</div>
<input id="clickMeBT" type="button" value="clickMe"/>
</body>
<script type="text/javascript">
var data1 = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var data2 = {
title: '基本例子',
isAdmin: true,
list: ['文艺1', '博客1', '摄影1', '电影1', '民谣1', '旅行1', '吉他1']
};
var arr = [];
arr.push(data1);
arr.push(data2);
var i = 0;
$("#clickMeBT").click(function() {
//template('test1', "");
//template('test2', "");
var html = "";
if(i == 0) {
html = template('test1', arr[0]);
i = 1;
} else {
html = template('test2', arr[1]);
i = 0;
}
$("#content").html(html);
});
</script>
</html>上面的代码中当点击clickMe的时候想做切换模板数据的操作，但是会报template erro的错误，貌似使用模板的时候都要在文档加载的时候先填充一遍数据，如果文档加载时你并没有使用该模板来填充数据，再次使用该模板的时候就会发送模板不存在的提示
所以想做模板切换只能修改代码如下
$("#clickMeBT").click(function() {
//template('test1', "");
//template('test2', "");
html1 = template('test1', arr[0]);
html2 = template('test2', arr[1]);
var html = "";
if(i == 0) {
html = html1
i = 1;
} else {
html = html2;
i = 0;
}
$("#content").html(html);
});
75
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
