模板artTemplate

模板artTemplate的简单用法

artTemplate 分为两种一种是原生语法 一种是简洁语法

原生语法 是arttemplate-native.js 语法如下：

html页面中引入template
<script src="template-native.js"></script>
其次定义一个模板字符串
<script type="text/template" id="box_template">
<% for(var i = 0 ; i < model.length; i ++){ %>
称：<%=model[i].title%>
份：<%=model[i].year%><br>
<% }; %>
</script>
注意： 模板字符串有一个id 作为标识
在js文件中
1.准备数据
var dataList = [
{name:'xhh',age:'10'},
{name:'xhh',age:'12'},
{name:'xmm',age:'13'},
{name:'xtt',age:'14'},
{name:'xff',age:'18'}
]
2.把准备的数据转换为html
var html = template('box_template',{model:dataList});
template中第一个是html页面中定义模板字符串的id，第二个是把准备的数据转交给model 在html中直接遍历model
3.渲染
document.querySelector('body').innerHtml = html
把转换好的html结构 渲染在页面中>

简洁语法

html页面中引入template
<script src="template.js"></script>
其次定义一个模板字符串
<script type="text/template" id="box_template">
{{ each model as value i }}
{{value.name}}今年{{value.age}}<br>
{{/each}}
</script>
剩下的和原生语法的一致！

						希望对大家有帮助哟！！！
										---不唱歌的刘欢