腾讯js模板引擎 artTemplate 学习

使用方式:

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/