引入artTemplate.js
<script type="text/javascript" src="${ctx}/assets/plugins/artTemplate/3.0.1/template.js"></script>
方法
1.template(id, data)
文档示例：
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>狗子{{i + 1}} ：{{value}}</li> //value是list中的数据。
{{/each}}
</ul>
</script>
var data = {
title: '宝宝喜欢的狗种类',
list: ['拉布拉多', '萨摩耶', '塞罗纳', '边牧', '京巴', '牛头梗', '松狮']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;显示结果：
<div id="content">
<h1>宝宝喜欢的狗种类</h1>
<ul>
<li>狗子1：拉布拉多</li>
<li>狗子2：萨摩耶</li>
<li>狗子3：塞罗纳</li>
<li>狗子4：边牧</li>
<li>狗子5：京巴</li>
<li>狗子6：牛头梗</li>
<li>狗子7：松狮</li>
</ul>
</div>
项目实际一：
根据id，将data渲染至模板。如果没有 data 参数，那么将返回一渲染函数。
创建模版，并使用ajax请求公共组件app-jquery-http.js请求数据渲染至模版。
（1）创建模版：
<div id="banner">
<ul id="bannerList"> </ul>
<script type="text/html" id="bannerListTmp"> //先通过（2）请求到数据，才能加载数据到模版。
{{each sub as value i }} // 等价于：for(var i in sub) ，由（2）可知sub是数组
<li><img src="{{value.imgPath}}" /></li> // {{}}
{{/each}}
</script>
</div>
（2）请求数据渲染模版。
原生js方式。
$.ajax({
type :"GET",
async : false,
url : ../bbs/topic/list,
data : {isBanner:true,pageSize:5},
dataType : "json",
success:function(list){
$("#bannerList").html(template("bannerListTmp",{sub:list}));
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
var info = "XMLHttpRequest:" + JSON.stringify(XMLHttpRequest)+ " ;textStatus:" + textStatus + "; errorThrown:"+ JSON.stringify(errorThrown) + ";【" + url + "】";
console.log(info);
});使用app-jquery-http.js 方式。
$.HTTP.list({ //type:"GET"
url : "../bbs/topic/list",
ajaxData : { //GET请求 将数据附加在url后，附加后的url为：http://127.0.0.1:8080/geekbar/bbs/topic/list?isBanner=true&pageSize=5
isBanner : true, //在链接后拼接形如：?a=1&b=2,不影响链接本身。
pageSize : 5
},
ajaxOption : {
async : false //同步请求：锁住浏览器，必须等到该请求结束后才能进行其他操作。
},
success : function(list) { //list为一个json数组:[object,object,...,object]
$("#bannerList").html(template("bannerListTmp", {sub : list})); //template(id,data);
}
});请求到的list如下：
项目实际二：
1.创建模版：
<form action="" id="infoDetail">
</form>
<script type="text/html" id="infoDetailTmp">
<img src="{{imgPath}}" />
<label>姓名</label>
<input type="text" readonly value="{{nickname}}" />
<label>性别</label>
<input type="text" value="{{if sex==0}}男{{else}}女{{/if}}" readonly />
<label>手机号</label>
<input type="text" readonly value="{{telephone}}" />
<label>个人标签</label>
<input type="text" readonly value="{{tag}}" />
</script>
2.渲染数据：
<script>
var userInfo = {};
$.HTTP.obj({ //type:post
url : "../rest/user/detailInfo",
success : function(json)(){ //json数据如下图所示
userInfo = json.data;
var html = template('infoDetailTmp', userInfo);
document.getElementById("infoDetail").innerHTML = html;
}
});
</script>
2.template helper(name, callback)
学渣表示到现在没看懂文档里时间格式器的例子 = =|||
项目实际一：
<span>{{value.state | getOrderState}}</span> // value.state就是请求到的数据中的list数组中每一个对象的state数据。 $.HTTP.list({
url : "rest/order/mylist.json",
ajaxData : {
pageNo : pageNo,
pageSize : 5,
search : searchInput.val(),
state : state
},
success : function(list, pInfo) { //该请求可以获得两个参数：list和pageInfo
var d = template("myOrderTmp", {
sub : list //each sub as value i
});
$("#myOrderList").append(d);
pageInfo = pInfo;
}
}); template.helper("getOrderState", function(state) { //该state可以任意命名，但是必须与后面的保持一致，这个数据是value.state得来的。
if(state == -2) { //均为state的数据
return "已取消";
}
if(state == -1) {
return "待下单";
}
if(state == 0) {
return "已寄出";
}
if(state == 3) {
return "已检测";
}
if(state == 4) {
return "维修中";
}
if(state == 5) {
return "待付款";
}
if(state == 6) {
return "待寄回";
}
if(state == 7) {
return "待签收";
}
if(state == 8) {
return "订单完成";
}
if(state == 1) {
return "正在检测";
}
});使用switch...case
template.helper("getOrderState", function(state) { //该state可以任意命名，但是必须知道它表示的是 value.state,value的值又是请求得到数据中的list数组中的数据。
switch(state){
case -2:
return "已取消";
break;
case -1:
return "待下单";
break;
case 0:
return "已寄出";
break;
case 3:
return "已检测";
break;
case 4:
return "维修中";
break;
case 5:
return "待付款";
break;
case 6:
return "待寄回";
break;
case 7:
return "待签收";
break;
case 8:
return "订单完成";
break;
case 1:
return "正在检测";
break;
default:
break;
}
});项目实际二：
<a href="{{value | getOrderDetailUrl}}" target="_self"></a> //value 就是请求到的data数据。 $.HTTP.obj ({
url : "../rest/order/mylistDetail.json",
ajaxData :
{
orderNo : orderNo
},
success : function (data) //对应的就是上一个代码的value。
{
var navhtml = $ (template ("navTmp", data));
var nav = $ ("#nav").html (navhtml);
}
}); template.helper("getOrderDetailUrl", function(data0) { //此data0可以任意命名，但是必须知道的是它代表着请求到的data数据，
if(data0.state == -2) {
return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;
}
if(data0.state == -1) {
return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;
}
if(data0.state == 0) {
return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;
}
if(data0.state == 3) {
return "order-detail-testres.jsp?orderNo=" + data.orderNo;
}
if(data0.state == 4) {
return "order-detail-testres.jsp?orderNo=" + data0.orderNo;
}
if(data0.state == 5) {
return "order-detail-pay.jsp?orderNo=" + data0.orderNo;
}
if(data0.state == 6) {
return "order-detail-rtservice.jsp?orderNo=" + data.orderNo;
}
if(data0.state == 7) {
return "order-detail-rtservice.jsp?orderNo=" + data0.orderNo;
}
if(data0.state == 8) {
return "order-detail-rtservice.jsp?orderNo=" + data0.orderNo;
}
return "order-detail-waitdo.jsp?orderNo=" + data0.orderNo;
});项目实际三：
{{#fixCheckInfo | getCheckInfoHtml}} template.helper("getCheckInfoHtml",function(c) {
var checkInfo = {};
var ck = $.parseJSON(c);
for(var i in ck) {
if(checkInfo[ck[i].v.toString()] == undefined) {
checkInfo[ck[i].v.toString()] = [];
}
checkInfo[ck[i].v.toString()].push(ck[i].k); //分类成下面三种数组
}
var res = '<p class="text-top">检测项目通过 <img src="data:images/check-1.png" /></p><table>';
for(var i in checkInfo['1']) {
var x = checkInfo['1'][i];
res += '<td>' + x + '</td>';
if((i + 1) % 3 == 0) {
res += '</tr><tr>';
}
}
res += '</table>' +
'<p class="text-top">检测项目未通过 <img src="data:images/check-2.png" /></p><table>';
for(var i in checkInfo['0']) {
var x = checkInfo['0'][i];
res += '<td>' + x + '</td>';
if((i + 1) % 3 == 0) {
res += '</tr><tr>';
}
}
res += '</table>' +
'<p class="text-top">检测项目未知 <img src="data:images/check-3.png" /></p><table>';
for(var i in checkInfo['-1']) {
var x = checkInfo['-1'][i];
res += '<td>' + x + '</td>';
if((i + 1) % 3 == 0) {
res += '</tr><tr>';
}
}
res += '</table>';
return res;
});fixCheckInfo：