使用方式:
1.引入js文件
<script src="js/template.js"></script>
2. 建立模板
<scriptid="test" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> {{/if}} </script> 3.3.渲染数据至指定区域 <script> var data = { title: '基本例子', isAdmin: true, list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script></body></html> 说明://提前声明type="text/html" 编译器则再不会报错
<scriptid="test" type="text/html"></script>表达式
{{
与}}
符号包裹起来的语句则为模板的逻辑表达式。输出表达式
对内容编码输出:
{{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}}
模板包含表达式
用于嵌入子模板。
{{include 'template_name'}}
子模板默认共享当前数据,亦可以指定数据:
{{include 'template_name' news_list}}
辅助方法
使用
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}}
具体说明使用参阅: http://aui.github.io/artTemplate/