templatejs使用總結

心語花束發表於2019-02-16
JS

概述

   template.js是一個基於 jquery 的前端 javascript 模板，外掛主要解決資料渲染時的繁瑣的資料處理。模板解決了html片段連線效率低下和繁瑣的問題。看了很多相關的部落格，部落格內容幾乎一樣，很多知識點並沒有詳細的說明，對此經過兩天的實驗研究，把研究的結果記錄下來。

模板標籤

1.{{each}}:雙標籤，用於遍歷物件，陣列或者 json 物件。
2.{{if}}:雙標籤，用於資料型別的判斷，條件可以是表示式。
3.{{else}}:單標籤，配合 {{if}} 標籤使用。
4.{{html}}:單標籤，用於解析含有 html 片段的字串。
5.{{tmpl}}:單標籤，用於模板的巢狀。
6.{{wrap}}:雙標籤，包裝器，(沒有發現使用的奧祕，歡迎指點)

模板的常用變數和方法

  有用的常量：
  (1) ${var}:輸出變數
  (2) {{= var}}:輸出變數,注意等號後面必須緊跟空格
  
  (3) $item:表示當前模板
  (4) $data:表示資料來源，即模板注入的資料
  
  (5) $index:表示在使用 each 時的索引
  (6) $value:表示在使用 each 時的鍵值
  
  方法：
  (1) $.tamplate(name,str):將指定的html程式碼段轉化成指定名稱的模板,name模板名稱,str程式碼片段,
      並將資料快取。     
  (2) $.tmpl(name,data):核心方法，將資料注入模板,並解析模板,name模板名稱,data：資料來源
  (3) $.tmplItem(ele):獲取使用模板渲染的指定元素上的資料,ele表示DOM節點
  
  (4) $(ele).tmpl(data):區域性方法,獲取模板,向模板中注入資料,並解析模板
  (5) $(ele).tmplItem():獲取使用模板渲染的指定元素上的資料,ele表示DOM節點
  (6) $(ele).template(name):將資料快取在ele節點，快取的key為name
  看原始碼發現區域性方法最終呼叫的是全域性的方法，所以在全域性的方法是template.js的核心，區域性方法只是輔助
功能，為使用者提供更靈活的方式獲取模板，為模板注入資料，解析模板。

標籤的使用

  1. {{each}}
    標籤為雙標籤，使用時必須使用{{/each}}標籤結束，在使用時需要注意一下幾點：

       (1) 在資料來源為陣列時，並不需要使用這個標籤，模板會自動遍歷陣列。
   (2) 
       使用方式一：
           {{each array|jsonObject}}，將陣列或json物件放在標籤名稱的後面，
         實現的遍歷方式，與 jquery 中的全域性方法 $.each() 相同。原始碼中也是通過 $.each() 實現的。
         使用這種方式，需要使用模板變數 $index 表示索引，$value 表示索引值。
         
       使用方式二：
           {{each(key,value) array|jsonObject}},使用此方式與方式一基本相同，唯一不同的是，
         此時指定了遍歷時的 key 和 value取代了模板變數 $index 和 $value，
         同時不能使用 $index和 $value。
   (3) 需要注意的是，資料來源的問題，若果使用的不是陣列，而是複雜的資料型別，可以使用模板巢狀的方式，
       解析資料型別為陣列的鍵值，這樣就避免了多次使用each標籤。

  2. {{if}}
    標籤為雙標籤，使用時必須使用{{/if}}標籤結束，使用方法：

       (1) {{if condition}} : condition 為條件表示式，和普通if基本相同。
   (2) 在邏輯判斷時配合{{else}}使用，所有的{{else}}標籤必須包含在{{if}}{{/if}}內。
  3. {{html}}
  4. {{tmpl}}

  5. {{wrap}}

相關文章