1、先引入template.js文件
<
script type=
"text/javascript" src=
"lib/template-web.js"></
script>
2、写模板代码
<
script id=
"other_text" type=
"text/html">
<
div class=
"msg_box">
<
h3>
<
span class=
"nickname lawyer_name"><%=name%></
span>
<
span class=
"msg_time"><%=time%></
span>
</
h3>
<
p><%=msg_content%></
p>
</
div>
</
script>3、使用模板
function showBox(obj){
var html = template("other_text",{name:obj.from,time:obj.time,msg_content:obj.data});//使用模板加载数据
$(".chat_msg").append(imgShow(html));//将加载了数据的模板添加到盒子里去}
4、aitTemplate语法分为简洁语法和原生语法
4.1简洁语法示例
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{author}}</h1>
<ul>
{{each list value i}}
<li>{{i+1}}:{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
author: '宫崎骏',
isAdmin: true,
list: ['千与千寻', '哈尔的移动城堡', '幽灵公主', '风之谷', '龙猫']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
4.2原生语法示例
<script id="template" type="text/html">
<div>
<% for(i=0;i<content.length;++i) {%>
<h1><%=content[i].province%></h1>
<% for(j=0 ; j<content[i].city.length ; ++j){%>
<p><%=content[i].city[j]%></p>
<%}%>
<%}%>
</div>
</script>
<script>
var data={
content:[
{province:'四川',city:['成都','绵阳','自贡']},
{province:'广东',city:['广州','东莞','佛山']},
{province:'海南',city:['海口','三亚']}
]
};
var html=template('template',data);
document.getElementById('area').innerHTML=html
</script>
