一、一句话介绍

artTemplate是新一代的高性能JavaScript模板引擎

二、插件官网

https://aui.github.io/art-template/

三、插件下载

完整版:https://github.com/aui/art-template

浏览器版:https://github.com/aui/art-template/tree/master/lib

四、简单使用(浏览器版)

1. 引入template-web.js

<script type="text/javascript" src="template-web.js"></script>

2. 定义数据结果渲染区

<div id="content"><div>

3. 定义数据模板

使用一个type=”text/html”的script标签定义数据存放模板

<script id="data-tpl" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list value i}}
        <li>索引 {{i + 1}} :{{value}}</li>
    {{/each}}
</ul>
</script>

4. 渲染数据

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};

var html = template('data-tpl', data);
document.getElementById('content').innerHTML = html;

五、artTemplate基础语法(浏览器版)

1. 变量输出

{{value}}                 -- 输出单个变量

{{data.key}}            -- 输出对象中的某个属性

{{data['key']}}          -- 输出数组中的某个属性

{{a ? b : c}}             -- 三目运算

{{a || b}}                  -- 为某个变量设置默认值b

{{a + b}}                  -- 表达式运算

{{@ value }}            -- 原样输出(变量前加@符号)

2. 条件判断

{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

3. 循环遍历

形式一(默认key和value)
{{each target}}

{{$index}} {{$value}}

{{/each}}
形式二(自定义key和value)
{{each target val key}}...{{/each}}

4. 引入子模板

– 子模板的默认变量为data

{{include './header.art'}}
`

– 向子模板传递自定义变量

{{include ‘./header.art’ data}}

注意:默认情况下,子模板中的数据变量名为data。标准语法不支持对象和数组的声明,只支持引用变量。但是,原始语法没有此限制。

5. 自定义过滤器

第一步:注册过滤器
template.defaults.imports.dateFormat = function(value, format) {...};

template.defaults.imports.timestamp = function(value) {...};

注意:过滤器至少需要一个参数,且第一个参数表示原始变量值,过滤器最后必须要return一个返回值。

第二步:使用过滤器
{{value | 过滤器名称}}                 -- 只有一个参数的过滤器调用方式

{{value | 过滤器名称 参数}}         -- 有一个以上参数的过滤器调用方式

来源:https://www.jianshu.com/p/51c1bfc300b5