使用artTemplate綁定json數據

概要

artTemplate 是新一代 javascript 模板引擎，它採用預編譯方式讓性能有了質的飛躍，並且充分利用 javascript 引擎特性，使得其性能無論在前端還是後端都有極其出色的表現。在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。

除了性能優勢外，調試功能也值得一提。模板調試器可以精確定位到引發渲染錯誤的模板語句，解決了編寫模板過程中無法調試的痛苦，讓開發變得高效，也避免了因爲單個模板出錯導致整個應用崩潰的情況發生。

artTemplate 這一切都在 1.7kb(gzip) 中實現！

特性

性能卓越，執行速度通常是 Mustache 與 tmpl 的 20 多倍（性能測試）
支持運行時調試，可精確定位異常模板所在語句（演示）
對 NodeJS Express 友好支持
安全，默認對輸出進行轉義、在沙箱中運行編譯後的代碼（Node版本可以安全執行用戶上傳的模板）
支持include語句，可在瀏覽器端實現按路徑加載模板
支持預編譯，可將模板轉換成爲非常精簡的 js 文件
模板語句簡潔，無需前綴引用數據
支持所有流行的瀏覽器

下載地址（GitHub）:https://github.com/aui/artTemplate

最近做項目需要使用模板動態綁定數據，看到了artTemplate.js這個強大的模板引擎，使用了一下，效果不錯，有需要的朋友可以嘗試一下。

下面詳細解釋下artTemplate怎麼使用

首先展現下官方的demo使用：
http://aui.github.io/artTemplate/

其中使用最多的是以下方法：
1、template(id, data)

根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。

如果沒有 data 參數，那麼將返回一渲染函數。
2、template.compile(source, options)

將返回一個渲染函數。演示
3、template.render(source, options)

將返回渲染結果。
4、template.helper(name, callback)

添加輔助方法。

例如時間格式器：演示
5、template.config(name, value)

更改引擎的默認配置。

解釋一下template(id, data)的使用：
先展示一段代碼：
使用一個type=”text/html”的script標籤存放模板：

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

渲染模板

var data = {
    title: '標籤',
    list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

var html = template(‘test’, data);中的test參數是上面的

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

這段代碼中的list 是data的一個json數據，像json數組和對象，這點不要忽略。