template模板引擎基础总结_jquery arttemplate-CSDN博客

基础数据渲染

引入

<!--原生的模板引擎文件-->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/artTemplate/template-native.js"></script>

编写模板

<script id="template" type="text/template">
    <% getConsole().log(list);  %>
    <% jquery()(list).each(function(i, item){%>
    <tr>
        <td><%=i+1%></td>
        <td><%=item.username%></td>
        <td><%=item.password%></td>
        <td><%=item.age%></td>
    </tr>
    <% }) %>
</script>

插入数据

 //解决模板不能访问全局对象的问题
    template.helper("getConsole", function () {
        return console;
    });
    template.helper("jquery", function () {
        return $;
    });
    var data = [
        { "username": "张三", "password" : "1237756" ,"age": 20},
        { "username": "张四", "password" : "123886" ,"age": 21},
        { "username": "张五", "password" : "123996" ,"age": 22},
    ]
    var html = template("template", {list : data})
    $("table").html(html);

html结构里放一个table，就可以接收数据并渲染到页面

流程控制语句

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}

遍历循环语句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}