artTemplate

特性

1 性能卓越

2 支持运行时调试

3 对NodeJS Express友好支持

4 安全 ，默认对输出进行转义，在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）

5 支持include语句

6 可在浏览器端实现按路径加载模块

7 支持预编译，可将模板转换成非常精简的js文件

8 模板语句简洁，无须前缀引用数据，有简洁版本与原生语法版本可选

9 支持所有的流行的浏览器

编写模板   

使用 type='text/html'的script标签存放模板：

html

<div id='content'></div>

template

<script id="test" type="text/html">
    <h2>{{aa}}</h2>
    {{if isAdmin}}
    <h1>{{title}}</h1>
    <ul>
        {{each list as value i}}
        <li>索引：{{i}}:{{value}}</li>
        {{/each}}
    </ul>
    {{/if}}
</script>

渲染模板

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

 

简洁版语法说明：

表达式

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

输出表达式

对内容编码输出：

{{content}}

不编码输出：
{{#content}}

编码可以防止数据中含有HTML字符串，避免引起XSS攻击。

条件表达式

{{if admin}}

　　<p>admin</p>

{{else if code>0}}

　　<p>master</p>

{{else}}

　　<p>error!</p>

{{/if}}

遍历表达式

无论数组还是对象都可以用each 进行遍历

var data={

　　list:[

　　　　{user:'zhangsan'},
　　　　{user:'lisi'},

　　　　{user:'wangwu'}

　　]

};

{{each list as value index}}

　　<p>{{index}}===={{value.user}}<p>

{{/each}}

亦可以简写为：

{{each list}}

　　<p>{{$index}}====={{$value.user}}</p>

{{/each}}

遍历数组

var data={

　　list:['zhangsan','lisi','wangwu']

};

{{each list as value index}}

　　<p>{{index}}===={{value}}<p>

{{/each}}

亦可以简写为：

{{each list}}

　　<p>{{$index}}====={{$value}}</p>

{{/each}}

模板包含表达式

用于嵌入子模板

{{include 'template_name' news_list}}

方法：

template (id,data)

根据id渲染模板，内部会根据document.getElementById(id)查找模板；

如果没有data参数，那么将返回一个渲染函数

demo:

模板test

<script id="test" type="text/html">
    <h2>{{aa}}</h2>
    {{if isAdmin}}
    <h1>{{title}}</h1>
    <ul>
        {{each list as value i}}
        <li>索引：{{i}}:{{value}}</li>
        {{/each}}
    </ul>
    {{/if}}
</script>

json数据 data

var data = {
        aa:"ewewew",
        title : 'HELLO WORLD',
        isAdmin : true,
        list : ['新闻','军事','历史','政治']
    };

var render=template('test');//返回一个模板test额渲染函数

var html=render(data);

document.getElementById('content').innerHTML=html;

template.compile(source,options)

根据模板内容渲染模板，如果没有options，返回的是一个模板函数

demo：

模板：

var test3='<h2>{{aa}}</h2>\
{{if isAdmin}}\
<h1>{{title}}</h1>\
<ul>\
{{each list}}\
<li>索引：{{$index}}:{{$value}}</li>\
{{/each}}\
</ul>\
{{/if}}';

var render=template.compile('test3');//返回一个模板test3额渲染函数

var html=render(data);

document.getElementById('content').innerHTML=html;

缺点：

这种方式的的缺点是，模板通过字符串拼接，不好维护，适合简单模板。

template.render

同 template.compile

 

辅助方法

template.helper(name,callback) 

使用template.helper(name,callback) 注册公用辅助方法：（作用于模板中。name方法名，callback回调函数）

模板不能访问全局对象

template.helper('dateFormat', function (date, format) {
    // ..
    return value;
});

demo:

<script type="text/javascript">
    var test4='<span>test4</span><h2>{{value |test:aa}}</h2>\
    {{if isAdmin}}\
    <h1>{{title}}</h1>\
    <ul>\
    {{each list}}\
    <li>索引：{{$index}}:{{$value}}</li>\
    {{/each}}\
    </ul>\
    {{/if}}';
</script>
var data = {
    aa:"ewewew",
    title : 'HELLO WORLD',
    isAdmin : true,
    list : ['新闻','军事','历史','政治']
};

上面的模板调用方法test。需要在helper中的进行注册

template.helper('test',function(a){
        return 'this is my first templateHelp:'+a
    });
    var html4=render1(data);
    document.getElementById("content4").innerHTML=html4;

辅助函数声明后模板中就可以进行调用了，如果没有声明就不能使用。

原生语法如下：

<%=test(23)%>

如果辅助函数有多个参数:

<%=test(23,'value1','value2'..)%>

参数顺序按书写顺序，<%%>是执行脚本语句<%=%>是输出脚步执行结果

简洁语法如下：

{{value |test:23}}(调用test方法 value是第一个参数    23是第二个参数)

如果辅助函数有多个参数:

{{value | test:'value1','value2'..)}}

参数顺序value是第一个参数，value1是第二个参数，value2是第三个参数..

原生语法与简洁语法比较

语法类型	调用外部函数
原生	<%=formatPrice(product.promoPrice,'integer')%>
简洁	{{product.price.value | formatPrice: 'integer'}}

 

 

 

1. 简洁语法的传参有点奇怪，原生语法就很好理解，如果要传递三个参数，简洁语法该怎么写呢？
2. 简洁语法的循环如果要做更多逻辑，也实现不了。

3. 精简语法：表达不直观，不利于阅读，但兼容jsp页面

4. 原生语法：表达直观，利于阅读，但不兼容jsp页面

推荐使用原生语法

调用外部函数，需要在helper中进行注册

模板中使用的方式：

{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

支持传入参数与嵌套使用：

{{time | say:'cd' | ubb | link}}

精简语法的调用辅助方法作者这样设计不知道在什么场景下有用:
原以为辅助方法say执行完毕会把结果传递给下一个方法执行，但并不是这样
并且这样的调用使用必须在开始指定一个数据名并把数据作为辅助函数的第一个参数,而辅助函数:后面开始的作为第二个参数依次来推

通过查询百度

貌似提供有这种方式，但不知官方为何没有说明

{{say(time)}}

这种方式更直观更简洁，不是吗

模板包含表达式-若无note.js和TmodJS的支持仅限页面内的模板

用于嵌入子模板。

 {{include 'template_name'}}

子模板默认共享当前传入模板的数据，也可以为子模板指定接收的数据：

 {{include 'template_name' news_list}}

 

template.config(name, value)

字段	类型	默认值	说明
openTag	String	'{{'	逻辑语法开始标签
closeTag	String	'}}'	逻辑语法结束标签
escape	Boolean	true	是否编码输出 HTML 字符
cache	Boolean	true	是否开启缓存（依赖 options 的 filename 字段）
compress	Boolean	false	是否压缩 HTML 多余空白字符

 

 

 

 

 

 

参考1：http://www.cnblogs.com/hihtml5/p/6286810.html?utm_source=itdadao&utm_medium=referral

参考2：http://www.jianshu.com/p/483fa7f6f55b

参考3：http://www.jq22.com/jquery-info1097