前端渲染利器——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頁面：

  

      它的數據來源大概是這樣：

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