likes
comments
collection
share

artTemplate模板引擎

作者站长头像
站长
· 阅读数 3

用artTemplate模板引擎需要先引入此js文件。模板引擎的作用是将重复的代码写成模板，再多次调用，使页面简洁，减少代码量 将模板代码放在<script id="temp" type="text/html"></script>中,id可以随意命名，type固定为 type="text/html"，这样页面就不会显示这行代码，模板代码可以放在页面任意位置，通过append或者html调用它 模板引擎中的变量用{{}}填入，将所有需要填写的变量写入对象中，若只需要循环操作，可以写成数组

  • 例子1：此例子将变量写入data中，通过template('temp', data)将模板生成页面html代码，再通过innerHtml将它写入id为container的div中。{{each city value i}}{{/each}}代表了对于数组data.city的循环，data.city.length为6，所以循环6次，每次写入变量value.
<body>
    <div id="container"></div>
    <script id="temp" type="text/html">
        <h1>{{title}}</h1>
         <ul>
            {{each city value i}}
            <li>{{value}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        var data = {
            title: '城市',
            city: ['江苏', '上海', '北京', '成都', '深圳', '杭州']
        };
        document.getElementById('container').innerHTML = template('temp', data);
    </script>
</body>
  • 例子2：当模板里面只有循环语句时，写入的数据类型是数组，我们需要用$data代表此数组，此时若{{each city value i}}{{/each}}没有value和i，需要数组中的值也可以使用value:$value,index:$index
<body>
    <div id="container"></div>
    <script id="temp" type="text/html">
        <ul>
            {{each $data value i}}
            <li>{{value}}</li>
            {{/each}}
        </ul>
        
    </script>
    <script>
        var city = ['江苏', '上海', '北京', '成都', '深圳', '杭州'];
        document.getElementById('container').innerHTML = template('temp', city);
    </script>
</body>
  • 此外模板引擎还可以用条件判断语句{{if value}} ... {{/if}}和过滤器{{a ? b : c}}默认值{{a || b}}和表达式运算{{a + b}}
转载自:https://juejin.cn/post/6844904061540499463
评论
请登录