通過模板引擎，可以不再使用字符串拼接的方式來進行動態結構和數據的添加，同時，可以使頁面結構更加清晰，易於修改和維護。特別對於需要循環添加的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": ["姓名", "年齡", "性別", "愛好", "詳情"]
}
}