【JS__模板引擎】art-template模板引擎的使用

1. 前言

后台返回json数据到前端页面,前端把数据渲染到页面,此时列表数据较多,之前用简单模板引擎不能有效的进行if等逻辑判断

2.使用art-template   art-template.js

    <div id="c1"></div>
    <script src="../lib/art-template.js"></script>
    <script id="templateId" type="text/html">
        <h2>art-template模板使用</h2>
        <ul>
            {{each list item i}}
            {{if item.id == 2}}
            <li>id:{{item.id}} name:{{item.name}} 嘿嘿</li>
            {{else}}
            <li>id:{{item.id}} name:{{item.name}}</li>
            {{/if}}
            {{/each}}
        </ul>
    </script>
    <script>
        var obj = { code: 1, msg: "", list: [{ id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }] };
        document.getElementById('c1').innerHTML = template('templateId', obj);
    </script>

猜你喜欢

转载自www.cnblogs.com/kikyoqiang/p/12824809.html