使用template.js处理数据

状况描述：页面用Ajax向后台请求数据，把数据渲染进列表中。

解决方案：template.js(https://github.com/yanhaijing/template.js)

步骤：

1. 页面引入template.js

<script src="js/template.js" type="text/javascript"></script>

2.编写要渲染的模板

模板放在script标签里，type=”text/html”。模板里的每行语句要有<%%>包裹，模板中的数据插值形式为<%=data%>

<script id="listTemplate" type="text/html">
<%var pageSize=4;%>
<%for (var i=0;i<pageSize;i++) {%>
<li>
<img class="img" src="<%=listData[i].imgSrc%>" />
<div class="txt">
<div class="txtTitle"><%=listData[i].txtTitle%></div>
<div class="txtContent"><%=listData[i].txtContent%></div>
</div>
</li>
<%}%>
</script>

3.在JS脚本中，调用template()方法将Ajax取到的数据赋给变量，再把由模板渲染出来的HTML插进对应的结构里。

<script type="text/javascript">
var renderData=template($("#listTemplate").html(),{listData:data.List});
$("ul").html(renderData);
</script>