ArtTemplate

简介

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

 

插件官网

http://aui.github.io/art-template/zh-cn/docs/syntax.html

 

插件下载

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

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

 

简单使用

① 引入template-web.js

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

 

② 定义数据结果渲染区

<div id="content"><div>

 

③ 定义数据模板

    使用一个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>

 

④ 渲染数据

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

 

基础语法

变量

标准语法：

{{set temp = data.sub.content}}

原始语法： 

<% var temp = data.sub.content; %>

 

变量输出（标准语法 + 原始语法）

{{value}}               -- 输出单个变量
<%= value %>

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

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

{{a ? b : c}}           -- 三目运算
<%= a ? b : c %>

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

{{a + b}}               -- 表达式运算
<%= a + b %>

{{@ value }}            -- 原样输出（变量前加@或者#符号）
<%- value %>            -- 原文输出语句不会对 HTML 内容进行转义处理

 

条件判断

标准语法：

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

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

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

 

原始语法： 

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

 

循环遍历

无论数组或者对象都可以用 each 进行遍历。

标准语法：

形式一（默认key和value）

{{each target}}

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

{{/each}}

形式二（自定义key和value）

{{each target val key}}...{{/each}}

 

原始语法： 

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

 

 

API

• template(id, data)

根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一个渲染函数。

• template.compile(source, options)

可以直接在js中使用字符串作为模板内容进行编译，之后将返回一个渲染函数。options参数猜想应该是局部配置

• template.render(source, options)

如果直接使用和compile一样起编译作用，一般不直接使用，编译后返回的就是这个函数。渲染编译后的模板并返回结果。options参数猜想应该是局部配置

• template.helper(name, callback)

添加辅助方法，作用于模板中。name方法名，callback回调函数