模板引擎——jquery.tmpl.js

通过模板引擎，可以不再使用字符串拼接的方式来进行动态结构和数据的添加，同时，可以使页面结构更加清晰，易于修改和维护。特别对于需要循环添加的dom，正适合使用。所有的模板引擎都是类似的，现在针对jquery.tmpl.js模板引擎进行一个简单的使用总结，方便再次使用的时候节约搜索及调试时间。

第一步：完成静态页面和样式调整

第二步：下载并引用模板文件jquery.tmpl.js

第三步：将需要模板写入的部分剪切到模板里面（先不用改成变量的形式，根据请求回的数据再进行改造即可），只留下一个模板容器，如下所示的#dataWrapper

第四步：在js里面，获取动态数据，进行模板渲染

常用标签：
${}和{{= data}}：用于输出变量，其中等号后面一定要有空格
{{each}}：提供循环逻辑，其中，嵌套循环如本例所示
其他标签暂时还未用到，按需查找，再总结下

通过阅读jquery.tmpl.js源码可知，将渲染的数据填充到模板容器还有如下几种方式：
appendTo: "append",
prependTo: "prepend",
insertBefore: "before",
insertAfter: "after",
replaceAll: "replaceWith"

<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>

$.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": ["姓名", "年龄", "性别", "爱好", "详情"]
    }

模板引擎——jquery.tmpl.js

猜你喜欢