js模板引擎——artTemplate的使用问题

Posted 2020-09-26 未央oo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js模板引擎——artTemplate的使用问题相关的知识，希望对你有一定的参考价值。

最近在使用模板引擎，对于出现的错误做一个小总结。

想要在下拉框中使用模板，让下拉选项中的每一项都由模板显示。

用下面的写法会出错，只有一个下拉选项，所有的数据都在一行内。

....

<select>
    <option id="temp"></option>
    <script type="text/html" id="test">
          {{if data.count > 0}}
                {{each data.list as item i}}
                        {{item.id}}-{{item.name}}
                 {{/each}}
           {{/if}}
    </script>
    <script src="js/artTemplate.js"></script>
    <script>
           var data = {
                   count:2,
                   list:[
                         {
                             id:1,
                             name: "hihi"
                         },
                         {
                             id:2,
                             name:"boe"
                          }
                    ]
             }
             var html = template("test",data);
             document.getElementById("temp").innerHTML = html;
    </script>
</select>

这是模板使用错误，正确的方式：

....

<!--显示模板的地方 -->
<select id="temp></select>

<!-- 需要引入artTemplate.js才能使用模板-->
<script src="js/artTemplate.js"></script>  

<!-- 使用一个type="text/html"的script标签存放模板-->
    <script type="text/html" id="test">
          <option>请选择</option>
          {{if data.count > 0}}
                {{each data.list as item i}}
                        <option value="{{item.id}}">{{item.name}}</option>
                 {{/each}}
           {{/if}}
    </script>
 
<!-- 渲染模板-->
    <script>
           var data = {
                   count:2,
                   list:[
                         {
                             id:1,
                             name: "hihi"
                         },
                         {
                             id:2,
                             name:"boe"
                          }
                    ]
             }
             var html = template("test",data);
             document.getElementById("temp").innerHTML = html;
    </script>

当然模板也可以结合ajax和json来使用