語(yǔ)法
- 首先同樣是引入template.js
<script src="template.js"></script>
- 在結(jié)構(gòu)中隨便創(chuàng)建個(gè)div
<div id="div1"></div>
- 創(chuàng)建模板(簡(jiǎn)潔的語(yǔ)法)
<script id="content" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value index}}
<li>索引:{{index}}:{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
- 創(chuàng)建模板(原生語(yǔ)法)
<%if (isAdmin) {%>
<h1><%=title%></h1>
<ul>
<%for (var i = 0; i < list.length; i++) {%>
<li>索引:<%i%>:<%list[i]%></li>
<%}%>
</ul>
<%}%>
* 數(shù)據(jù) (數(shù)據(jù)一般是從后臺(tái)獲韧叭浮)
<script>
var data = {
title: "hello world",
isAdmin: true,
list: ['新聞','軍事','歷史','政治']
}磨淌;
var html = template('content',data);
document.getElementById('div1').innerHTML = html;
</script>
> 注意:簡(jiǎn)潔語(yǔ)法引用的js為(template.js),原生語(yǔ)法引用的js為(template-native.js)
參考網(wǎng)址:https://github.com/aui/artTemplate