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