标签：数据 ext val htm name document ntb inner select
最近在使用模板引擎，对于出现的错误做一个小总结。
想要在下拉框中使用模板，让下拉选项中的每一项都由模板显示。
用下面的写法会出错，只有一个下拉选项，所有的数据都在一行内。
....
<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来使用
标签：数据 ext val htm name document ntb inner select
原文地址：http://www.cnblogs.com/weiyangoo/p/7102250.html
