JsRender不少前端人員應該都用過，它是一個比較強大的模板，不牽涉太多技術依賴，使用起來非常舒服。我本人在前端開發中使用React之前，都是用的它了（實際上我感覺React沒有JsViewes好用）。不管怎麼說，先來學習下JsRender技術吧，如果前端的開發環境比較單純，還是很適合的。 一、J ...
JsRender不少前端人員應該都用過，它是一個比較強大的模板，不牽涉太多技術依賴，使用起來非常舒服。我本人在前端開發中使用React之前，都是用的它了（實際上我感覺React沒有JsViewes好用）。不管怎麼說，先來學習下JsRender技術吧，如果前端的開發環境比較單純，還是很適合的。
一、JsRender特性
新一代的前端渲染模板
-
使用模板，可以預先自定義一些固定格式的HTML標簽，在需要顯示數據時，再傳入真實數據組裝並展示在Web頁中；這避免了在JS中通過“+”等手動分割、連接字元串的複雜過程。
-
針對高性能和純字元串渲染進行了優化
-
無需依賴DOM和jQuery
優先使用場景
- 元素重覆出現
- 動態載入數據，並前端顯示
二、JsRender使用
- 引入js：jsrender.js
- 定義模板：
- 準備好要顯示的數據 json對象 var data = { xxx:“text” }
- 編譯成元素：document.getElementById(“XXX”).render(data); 或 $("#XXX").render(data);
- 通過容器元素的append、before、after顯示
基本語法
- 原始賦值： {{:屬性名}}，顯示原始數據
- 轉碼賦值： {{>屬性名}}，顯示HTML編碼後的數據
- 控制語句可嵌套使用：
- 判斷： {{if 表達式}} … {{else}} … {{/if}}
- 迴圈： {{for 數組}} … {{/for}}
- 其它進階
- 模板嵌套，使用：{{for tmpl="#另一個模板" /}}
- 轉換器 $.views.converters()定義，使用：{{func:屬性名}}
- 幫助方法 $.views.helpers()定義，使用：{{if ~func(arg1, arg2, ...)}}
- 自定義標簽 $.views.tags()
幾個你可能不知道的要點
-
獲取當前的索引：#index，如{{if #index==0}} ... {{/if}}
-
獲取整個數據：#data， 如<option value="{{:#index}}">{{:#data}}</option>
-
獲取父模板：#parent， 如{{if (#parent.data.general==0)}} ... {{/if}}
三、舉個例子
下圖中是我以前做的一個Web頁面：
它的數據來源大概是這樣：
[
{
id:12,
cid:195,
type:"問題簡述",
impact:"錯誤級別",
status:"處理狀態",
owner:"處理人",
count:1,
path:"問題所在文件的SVN路徑",
rev:對應文件的SVN版本號,
…
} , ...
]
我們關註的是這個模板是怎麼寫的：
大家可以看上圖中標紅的部分，除了helper與tag外，大部分功能都用上了。我實在不想好好做個demo給大家下載了，本身不複雜，不明白可以再交流。
四、性能比較
轉載請註明原址：http://www.cnblogs.com/lekko/p/5888962.html
