引用script
<script src="baiduTemplate.js" charset="UTF-8">
</script>
模板语法
<script id="header" type="text/html">
<h1>姓名:<%=name%></h1>
<h1>年龄:<%=age%></h1>
<ul>
<%for(var i=0;i<foods.length;i++){%>
<li><%=foods[i]%></li>
<%}%>
</ul>
</script>
直接写html代码,如果需要加js代码则需要用<% js代码 %>
若是变量则<%= 变量%>
然后在下面正常写js代码
<script>
var data={
name:'xiaoming',
age:13.5,
foods:['蒸羊羔','蒸熊掌','一盆米饭我够了']
};
// 生成html片段
var html=baidu.template('header',data);
console.log(html);
</script>
拓展: artTemplate
artTemplate有两种语法,所以就有两个库,
一种是简洁语法,一种是原生语法,引用方法类似于baidu.Template,但是性能优于baidu.Template;
- 简洁语法
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引{{i+1}}:{{value}}</li>
{{/each}}
</ul>
用each方法循环
- 原生语法
类似于baidu.Template;
<h1><%=title%></h1>
<ul>
<%for(var a of item){%>
<li><%=a%></li>
<%}%>
</ul>