模板引擎——jquery.tmpl.js
通过模板引擎，可以不再使用字符串拼接的方式来进行动态结构和数据的添加，同时，可以使页面结构更加清晰，易于修改和维护。特别对于需要循环添加的dom，正适合使用。所有的模板引擎都是类似的，现在针对jquery.tmpl.js模板引擎进行一个简单的使用总结，方便再次使用的时候节约搜索及调试时间。
使用步骤：
- 第一步：完成静态页面和样式调整
- 第二步：下载并引用模板文件jquery.tmpl.js
- 第三步：将需要模板写入的部分剪切到模板里面（先不用改成变量的形式，根据请求回的数据再进行改造即可），只留下一个模板容器，如下所示的#dataWrapper
- 第四步：在js里面，获取动态数据，进行模板渲染
- 备注：通过阅读jquery.tmpl.js源码可知，将渲染的数据填充到模板容器还有如下几种方式：
appendTo: "append",
prependTo: "prepend",
insertBefore: "before",
insertAfter: "after",
replaceAll: "replaceWith"
常用标签：
1.${data}和{{= data}}：
- 用于输出变量，其中，等号后面一定要有空格
2.{{each}}：
- 提供循环逻辑，其中，嵌套循环如下所示
3.{{if}} {{else}} {{/if}}
- 提供条件逻辑，{{else}} 相当于else if，使用示例如下所示
问题说明：
- 当标签的属性里面用到模板变量，如title="${v[j]}" title="{{= v[j]}}"，双引号是要加的，否则值里面如果有空格等，会导致显示不全。
//变量输出及循环逻辑
<body>
<div id="dataWrapper"></div>
<script id='dataTmpl' type="text/x-jquery-tmpl">
<table class="table-first">
<thead>
<tr>
{{each(i, v) title}}
<th>{{= v}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{each(i, v) data}}
<tr>
{{each(j, k) v}}
<td>{{= v[j]}}</td>
{{/each}}
<td>
<a href="javascript:;">详情</a>
</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
</body>
//条件逻辑
<table class="table-first">
<tbody>
{{if data.length > 0}}
{{each(i, v) data}}
<tr>
{{each(j, k) v}}
<td title="${v[j]}">{{= v[j]}}</td>
{{/each}}
</tr>
{{/each}}
{{else}}
<tr>
<td colspan="3" style="text-align: center;">暂无数据!</td>
</tr>
{{/if}}
</tbody>
</table>
$.ajax({
url: '请求的接口地址',
type: 'GET',
async: true,
data: {},
dataType:"json",
success: function(data) {
//通过模板渲染数据如下：
//1.通过id获取模板
//2.渲染数据
//3.并填充到模板容器中
$("#dataTmpl").tmpl(data.obj).appendTo("#dataWrapper");
//模板中的数据渲染，就是从.tmpl（）括号内的数据开始查找，如本例所示
},
error: function() {
console.log('出错了');
}
});
//请求回来的数据 data
{
"ret": 1,
"msg": "",
"obj": {
"data": [{
"name": "小明",
"age": "18",
"sex": "男",
"hobby": "篮球"
}, {
"name": "小明",
"age": "18",
"sex": "男",
"hobby": "篮球"
}, {
"name": "小明",
"age": "18",
"sex": "男",
"hobby": "篮球"
}, {
"name": "小明",
"age": "18",
"sex": "男",
"hobby": "篮球"
}, {
"name": "小明",
"age": "18",
"sex": "男",
"hobby": "篮球"
}],
"title": ["姓名", "年龄", "性别", "爱好", "详情"]
}
}
