腾讯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/







你可能感兴趣的:(JavaScript,腾讯,模板引擎)