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

Posted 2021-02-20 Kikyo

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 onclick="show(\'{{item.name}}\')">id:{{item.id}} name:{{item.name}}</li>
            {{/if}}
            {{/each}}
        </ul>
    </script>
    <script>
        window.onload = function () {
            var obj = { code: 1, msg: "", list: [{ id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }] };
            document.getElementById(\'c1\').innerHTML = template(\'templateId\', obj);
        }
        function show(a) {
            console.log("姓名：" + a);
        }
    </script>