最近在使用模板引擎，對於出現的錯誤做一個小總結。

想要在下拉框中使用模板，讓下拉選項中的每一項都由模板顯示。

用下面的寫法會出錯，只有一個下拉選項，所有的數據都在一行內。

....

<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來使用

js模板引擎——artTemplate的使用問題