前端渲染利器——JsRender入門

標籤：

     JsRender不少前端人員應該都用過，它是一個比較強大的模板，不牽涉太多技術依賴，使用起來非常舒服。我本人在前端開發中使用React之前，都是用的它了（實際上我感覺React沒有JsViewes好用）。不管怎麼說，先來學習下JsRender技術吧，如果前端的開發環境比較單純，還是很適合的。

 

    一、JsRender特性

     新一代的前端渲染模板

• 使用模板，可以預先自訂一些固定格式的HTML標籤，在需要顯示資料時，再傳入真實資料群組裝並展示在Web頁中；這避免了在JS中通過“+”等手動分割、連接字串的複雜過程。

• 針對高效能和純字串渲染進行了最佳化

• 無需依賴DOM和jQuery

     優先使用情境

• 元素重複出現
• 動態載入資料，並最上層顯示

   

    二、JsRender使用

1. 引入js：jsrender.js
2. 定義模板：
3. 準備好要顯示的資料 json對象 var data = { xxx:“text” }
4. 編譯成元素：document.getElementById(“XXX”).render(data);   或 $("#XXX").render(data);
5. 通過容器元素的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頁面：

  

      它的資料來源大概是這樣：

1234567891011121314

[      {          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

 

  

 

前端渲染利器——JsRender入門