artTemplate教程
artTemplate教程
一个简单的例子
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script id="test" type="text/html">
<h1><%=title%></h1>
<ul>
<%
if(typeof list!='undefined'){
for(var i=0;i<list.length;i++){
%>
<li>索引 <%=i + 1%> ：<%=list[i]%></li>
<%> }
}
%>
</ul>
</script>
<div id="content"></div>
<script type="text/javascript" src="js/template-native.js"></script>
<script type="text/javascript">
var data = {
title: '标签',
list: ['a','b','c']
};
//根据id编译模板在进行渲染
var html = template('test',data);
//打印渲染结果
console.log(html);
//填充渲染结果到content
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
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回调函数
演示：
//js代码中声明一个辅助函数 template.helper('hi', function(name,age){ console.log('你好! 我叫'+name); console.log('我今年'+age+'岁'); //注意最后一定要返回一个结果给视图,否则这函数就没多大意义了 return 'result'; })辅助函数声明后模板中就可以进行调用了
原生语法如下：
<%=hi('高同学',23)%>如果辅助函数有多个参数:
<%=hi('高同学',23,'value1','value2'..)%>参数顺序按书写顺序，
<%%>是执行脚本语句<%=%>是输出脚步执行结果简洁语法如下：
{{value |hi:23}}如果辅助函数有多个参数:
{{value | hi:'value1','value2'..)}}参数顺序
value是第一个参数，value1是第二个参数，value2是第三个参数..
更多简洁语法的格式规范，请参考官方文档 -
template.config(name, value)
字段 类型 默认值 说明 openTag String '{{' 逻辑语法开始标签 closeTag String '}}' 逻辑语法结束标签 escape Boolean true 是否编码输出 HTML 字符 cache Boolean true 是否开启缓存（依赖 options 的 filename 字段） compress Boolean false 是否压缩 HTML 多余空白字符
精简语法和原生语法比较：
身为一个java程序员我肯定使用精简语法，故这里主要描述下精简语法：
使用
引用简洁语法的引擎版本，例如：
<script src="dist/template.js"></script>
表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
输出表达式
对内容编码输出：
{{content}}
不编码输出：
{{#content}}
编码输出可以防止数据中含有 HTML 字符串(数据原样输出)，避免引起 XSS 攻击。不编码输出含有html标签的元素将被浏览器解析为html元素
条件表达式
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
//可以任意使用js关键字
<ul>
{{if typeof list!='undefined'}}
{{each list}}
<li>索引 {{$index}}. {{$value}}</li>
{{/each}}
{{/if}}
</ul>
遍历表达式
无论数组或者对象都可以用 each 进行遍历。
{{each list as value index}}
<li>{{index}} - {{value.user}}</li>
{{/each}}
亦可以被简写：
//$index表示数组下标，$value表示数组当前成员
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
模板包含表达式-若无note.js和TmodJS的支持仅限页面内的模板
用于嵌入子模板。
{{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}}
精简语法的调用辅助方法作者这样设计不知道在什么场景下有用:
原以为辅助方法say执行完毕会把结果传递给下一个方法执行，但并不是这样
并且这样的调用使用必须在开始指定一个数据名并把数据作为辅助函数的第一个参数,而辅助函数:后面开始的作为第二个参数依次来推
通过查询百度
貌似提供有这种方式，但不知官方为何没有说明
{{say(time)}}
这种方式更直观更简洁，不是吗
以下部分需要note.js和TmodJS的支持,感兴趣可以参考官方文档
按文件与目录组织模板
template('tpl/home/main', data)
模板支持引入子模板
{{include '../public/header'}}
