好处
使用artTemplate处理数据更加简便,且代码看起来更加整洁。
编写模板
有两种形式的模板,简洁版和原生版。他们都写在有自己的id名且类型为text/html的javascript中。
简洁版
{{if admin}}
{{each list}}
<div>{{$value.user}}</div>
{{/each}}
{{/if}}
原生版
<%if (admin){%>
<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>
关于artTemplate简洁版的循环嵌套问题,给出如下的例子
<div id="content"></div>
<script>
$(function(){
var data1 = {
list : [{
title :'周一',
tags : [{
"tags":'英语'},{
"tags":'语文'},{
"tags":'数学'},{
"tags":'政治'}
]},{
title : '周二',
tags : [{
"tags":'地理'}, {
"tags":'体育'}, {
"tags":'英语'}, {
"tags":'历史'}]
}]
};
var html = template("art3",data1);
console.log(html);
$("#content").append(html);
})
</script>
<script id="art3" type="text/html">
{{each list}}
<div>
<h2>{{$value.title}}</h2>
{{include 'art4' $value}}
</div>
{{/each}}
</script>
<script id="art4" type="text/html">
<ul>
{{each tags}}
<li>{{$value.tags}}</li>
{{/each}}
</ul>
</script>
注意: 1.要引入artTemplate
2.script的id不要忘记设置,且type最好写一下
3.{{include ‘art4' $value}},表示调用id为art4的script。 如果数据tags下面还有一层x,这时嵌套的代码也要相应的变化。
数据变成如下所示:
var data1 = {
list : [{
title :'周一',
tags : {
x:[{"tags":'英语'}, {
"tags":'语文'}, {
"tags":'数学'}, {
"tags":'政治'}
]}
},{
title : '周二',
tags :{
x:[{"tags":'地理'}, {
"tags":'体育'}, {
"tags":'英语'}, {
"tags":'历史'}]
}
}]
};
代码变成如下所示:
<script id="art3" type="text/html">
{{each list}}
<div>
<h2>{{$value.title}}</h2>
{{include 'art4' $value.tags}}
</div>
{{/each}}
</script>
<script id="art4" type="text/html">
<ul>
{{each x}}
<li>{{$value.tags}}</li>
{{/each}}
</ul>
</script> 循环嵌套最主要的就是清楚循环的是哪一个变量,遍历的又是什么变量。