模板引擎——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": ["姓名", "年龄", "性别", "爱好", "详情"]
	}
}