template.js是javascript模板引擎,很多时候在ajax请求数据渲染页面,个人感觉用了这个非常方便
首先得引入template.js
<div id="box"></div>
<script src="template.js"></script>
定义一个模板
<script type="template" id="tem1">
</script>
ajax请求出数据后
$.ajax({
url:'',
type:'get',
dataType: 'json',
success: function (data) {
var list = template(`tem1`, data);
$('#box').html(list);
}
})
模板遍历或者条件判断,里面index为索引
<script type="template" id="tem1">
{{ each data as value index }}
<ul>
{{if value.is_on == 0}}
<li data-id={{value.id}}>
<p>{{value.name}}</p>
<p>{{value.age}}</p>
</li>
{{else if value.is_on == 1}}
..........此处省略
{{/if}}
</ul>
{{ /each }}
</script>
你也可以这个标签上自定义属性,获取需要的值,当然也可以绑定onclick事件