artTemplate 简洁语法版

使用

这里要用gulp脚本或者界面工具
巴拉巴拉

表达式

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

输出表达式

对内容编码输出：

{{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}}

快速上手

编写模板

创建一个test.html文件，然后使用一个type="text/html"的script标签存放模板：

<script id="getMain" type="text/html">
	<h1>{{title}}</h1>
	<ul>
	    {{each list as value i}}
	        <li>索引 {{i + 1}} ：{{value}}</li>
	    {{/each}}
	</ul>
</script>

<script id="getContent" type="text/html">
	<h1>{{title}}</h1>
	{{if admin}}
		<p>admin</p>
    {{else if code > 0}}
    	<p>master</p>
    {{else}}
        <p>error!</p>
    {{/if}}
</script>

注意：script中Id就是对应的函数名, 这个例子中就定义了getMain，getContent两个函数

渲染模板

var data = {
	title: '标签',
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = rc.template.getTempFuncs('test', 'getMain', data);
document.getElementById('content').innerHTML = html;

本文档针对 artTemplate v3.0.0+ 编写