templatejs使用總結

luck 發布于2019-08-01 18:04 / 1341人閱讀

摘要：單標簽，配合標簽使用。使用這種方式，需要使用模板變量表示索引，表示索引值。標簽為雙標簽，使用時必須使用標簽結束，使用方法為條件表達式，和普通基本相同。在邏輯判斷時配合使用，所有的標簽必須包含在內。

概述

???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的核心，局部方法只是輔助
功能，為用戶提供更靈活的方式獲取模板，為模板注入數據，解析模板。

標簽的使用

{{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標簽。

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

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

云服務器 GPU云服務器使用方法總結 templatejs 年終總結網絡總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51569.html

templatejs使用總結

摘要：單標簽，配合標簽使用。使用這種方式，需要使用模板變量表示索引，表示索引值。標簽為雙標簽，使用時必須使用標簽結束，使用方法為條件表達式，和普通基本相同。在邏輯判斷時配合使用，所有的標簽必須包含在內。概述 ???template.js是一個基于 jquery 的前端 javascript 模板，插件主要解決數據渲染時的繁瑣的數據處理。模板解決了html片段連接效率低下和繁瑣的問題。看了很...

shaonbean 2019-08-21 17:45 評論0 收藏0
淺談模板引擎之artTemplate

摘要：來給大家推薦一款模板引擎，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個大概也才幾左右。對于前端開發者來說，有一個綁數據的模板是多么的幸福，不用我多說大家也知道，終于不用在js中一個個字符串拼接一大推元素數據啥的，可以省下我們很多時間。來給大家推薦一款模板引擎artTemplate，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個template.js大概也才幾...

zeyu 2019-08-01 17:19 評論0 收藏0
淺談模板引擎之artTemplate

摘要：來給大家推薦一款模板引擎，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個大概也才幾左右。對于前端開發者來說，有一個綁數據的模板是多么的幸福，不用我多說大家也知道，終于不用在js中一個個字符串拼接一大推元素數據啥的，可以省下我們很多時間。來給大家推薦一款模板引擎artTemplate，會推薦這款模板引擎最主要還是他輕量級，代碼簡潔，好用，一個template.js大概也才幾...

caohaoyu 2019-08-20 18:28 評論0 收藏0
基于TmodJS的前端模板工程化解決方案

摘要：原作者唐斌騰訊什么原名是一個簡單易用的前端模板預編譯工具。本文作者為來自騰訊團隊的唐斌，他在本文中為我們分析了傳統前端模板內嵌的弊端，如開發調試效率低下自動化構建復雜度比較高等特點，并針對目前現狀給出了較好的解決方案。原作者: 唐斌（騰訊）| TmodJS什么 TmodJS（原名atc）是一個簡單易用的前端模板預編譯工具。它通過預編譯技術讓前端模板突破瀏覽器限制，實現后端模板一樣的同...

zhaochunqi 2019-08-20 13:35 評論0 收藏0
Java學習路線總結，搬磚工逆襲Java架構師（全網最強）

摘要：哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼，加入群聊，一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話，現在公司的現狀是碼農太多，但能獨立帶隊的人太少，簡而言之，不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...

Scorpion 2021-11-18 10:02 評論0 收藏0