首页 > 代码库 > js模板引擎——artTemplate的使用问题

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

2024-10-14 23:43:02   212人阅读

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

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

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

....

<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="http://www.mamicode.com/js/artTemplate.js"></script>
    <script>
           var data = http://www.mamicode.com/{"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="http://www.mamicode.com/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="http://www.mamicode.com/{{item.id}}">{{item.name}}</option>
                 {{/each}}
           {{/if}}
    </script>
 
<!-- 渲染模板-->
    <script>
           var data = http://www.mamicode.com/{"hihi"
                         },
                         {
                             id:2,
                             name:"boe"
                          }
                    ]
             }
             var html = template("test",data);
             document.getElementById("temp").innerHTML = html;
    </script>

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

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


联系
我们