首页 > 代码库 > js模板引擎——artTemplate的使用问题
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="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的使用问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。