1.编辑模板，template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数，那么将返回一渲染函数。有data那么就返回Html。
var data = { title: ‘标签‘, list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘] }; var html = template(‘test‘, data); document.getElementById(‘content‘).innerHTML = html; <script id="test" type="text/html"> <h1>{{title}}</h1>//直接使用data里的属性title <ul> {{each list as value i}}//直接可遍历data里面的list属性，list是一个数组 <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> </script> //渲染数据 var data = { title: ‘标签‘, list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘] }; var html = template(‘test‘, data); document.getElementById(‘content‘).innerHTML = html
1.</pre><pre name="code" class="javascript">
<script id="test" type="text/html"> 2.{{if admin}} 3. {{each list as value index}} 4. <div>{{index}}:{{value}}</div> 5. {{/each}} 6.{{else if}} 7.条件判断 8.{{/if}} </script>
<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> · <script> var data = { title: "hello world", isAdmin: true, list: [‘新闻‘,‘军事‘,‘历史‘,‘政治‘] }； var html = template(‘content‘,data); document.getElementById(‘div1‘).innerHTML = html; </script>
2.语法
- 表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
- 输出表达式
对内容编码输出：
{{content}}
不编码输出：
{{#content}}
注意：编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
- 条件表达式
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
- 遍历表达式
无论数组或者对象都可以用 each 进行遍历。
{{each list as value index}}
<li>{{index}} - {{value.user}}</li>
{{/each}}
//亦可以被简写：
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
3.artTemplate模板中的简洁语法循环嵌套
试试 {{each albums ...}} 改成 {{each $value.albums ...}}
- 模板包含表达式
用于嵌入子模板。
{{include ‘template_name‘}}
子模板默认共享当前数据，亦可以指定数据：
{{include ‘template_name‘ news_list}}
- 辅助方法
嵌入子模板(include)
嵌套模板跟第一种方法原理相同，只不过在一个模板中调用了另外一个模板而已。
<script id=‘test‘ type=‘text/html‘>
<h1>My Life</h1>
{{include ‘list‘}}
</script>
<script id=‘list‘ type=‘text/html‘>
<ul>
{{each list as value i}}
<li>索引{{i+1}}：{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
"list":[‘篮球‘,‘桌球‘,‘游泳‘,‘滑轮‘,‘读书‘]
};
var html = template(‘test‘,data);
$(‘.rascal‘).html(html);
</script>
上面代码中，要注意几点的就是：
? 遍历表达式中的list必须与脚本中data对象中的list同名，而且遍历表达式中的list必须是data对象中的一个属性。循环表达式中，要循环的是每一个data对象中的list数组，而不是data对象，这点很重要。
在这个例子中，data对象中list属性是一个数组，数组中的每一个值都是简单数据类型，篮球桌球等。当然，可以往数组中传入复杂数据类型，如对象。说明这个主要是因为在循环表达式中循环的数据和给template()传入第二个参数的时候很容易出错。
? 使用template方法时，第一个参数必须是id，而不能是class。
使用template.helper(name, callback)注册公用辅助方法：
template.helper(‘dateFormat‘, function (date, format) { // .. return value; });
模板中使用的方式：
{{time | dateFormat:‘yyyy-MM-dd hh:mm:ss‘}}
支持传入参数与嵌套使用：
{{time | say:‘cd‘ | ubb | link}}
<script id="template_miniClassCpListPopover" type="text/html">
<table class="miniClassNamePopover textOverflowEllipsis" style="padding:0;width:622px;">
<tbody>
{{each items as item}}//遍历items数组，items数组是一个对象数组
<tr>
<td title="{{item.productName}}" >{{item.productName}}</td>
<td title="{{item.signDate}}">{{item.signDate}}</td>
<td>{{#paidStatusText(item.paidStatus)}}</td>
<td class="width150" title="{{quantityText(item.quantity,item.planAmount)}}">{{quantityText(item.quantity,item.planAmount)}}</td>
<td class="width150" title="{{remainHourText(item.remainHour,item.remainFund)}}">{{remainHourText(item.remainHour,item.remainFund)}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
//调用的方法
template.helper(‘paidStatusText‘, function (data) {
if(data == ‘PAYING‘){
return "<div style=‘color:#488ffa;‘>付款中</div>";
}else if(data == ‘UNPAY‘){
return "<div style=‘color:#ff6666;‘>未付款</div>";
}else if(data == ‘PAID‘){
return "<div style=‘color:#55be97;‘>已付款</div>";
}
})
template.helper(‘quantityText‘, function (data,amount) {
return data+"课时 / "+amount.toFixed(2)+"元";
})
template.helper(‘seatNumText‘, function (data) {
return data == null?"-":data;
})
template.helper(‘remainHourText‘, function (data,fund) {
return data+"课时 / "+fund.toFixed(2)+"元";
})
