【JS】jquery.tmpl.js模板引擎

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