jquery.tmplate使用心得

jquery.tmplate使用心得

jquery.tmpl.js，是與jquey共同使用的html模板插件。該插件可通過簡單的語法將數據放入到html模板中，可以很好的將數據渲染到頁面上。該插件在本項目中使用較多且網上的講解比較分散，無系統的api以及使用方法可以查詢，故將jquery.tmpl.js的api整理出來，以方便大家使用。
? ? ? ? 在使用之前一定要先加載jquery，并把jquery.tmpl.js加載進來
? ? ? ??一、目前使用比較多的api如下：
? ? ? ??1、判斷類語法
? ? ? ? ? ? ? ??1).{{if}}語法
? ? ? ? ? ? ? ? ? ? ? ? 該語法很好理解與使用。主要用作判斷。在{{if}}中加入判斷條件，如果滿足該條件就會執行之后的函數，否則就不會執行。舉個例子：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{if a == 10 }}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>例子</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{/if}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 在該例子中，只有當a = 10 的情況才會出現頁面中才會出現<p>例子</p>這個標簽，否則不會；另外一點，就是在使用jquery.tmpl.js的api的時候，一定要有閉合，如例子所示，一定要使用{{/if}}來對上面語法進行閉合，否則無法實現該語法；
? ? ? ? ? ? ? ? ? ? ? ??切記：一定要閉合；
? ? ? ? ? ? ? ??2).{{else}}語法
? ? ? ? ? ? ? ? ? ? ? ? 既然存在{{if}}語法了，肯定也是會存在{{else}}語法的了，該語法的作用是在不滿足在{{if}}中條件的時候才需要{{else}}語句，與javascript的語法很形似，同時，{{else}}語句與{{if}}語句同時存在。舉個例子：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{if a == 10}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>例子一</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{else}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>例子二</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{/if}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 在例子中，只有當 a = 10 的時候，頁面中才會出現標簽<p>例子一</p>，否則會出現標簽<p>例子二</p>，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??在{{if}}之中是一定需要{{/if}}標簽來閉合的，但是{{else}}是不需要書寫閉合的。
? ? ? ? ? ? ? ??3).${}語法
? ? ? ? ? ? ? ? ? ? ? ? 該語法主要用于簡短的判斷，一般適用于三目運算符。主要為 a==b ? a1 = 1: a1 = 2;??該語法也是用于判斷是否符合條件，如果符合則執行前面的,否則會執行后面的；同時該語法內可以直接書寫三目運算符。舉個例子：
? ? ? ? ? ? ? ? ? ? ? ? <span>${a ? 10 : 20}</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 該段語法的意思為如果a存在，則<span></span>標簽內的數據為10.否則為20；
? ? ? ??2、循環類語法
? ? ? ? ? ? ? ??4).{{each}}語法
? ? ? ? ? ? ? ? ? ? ? ? 該語法與javascript類似，起到循環的作用，可以對其后的數據進行遍歷，然后將遍歷的數據進行一系列的操作,另外從each中取得數據時經常與${}混合使用。同時，該語法也是需要進行閉合的。舉個例子:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{each(key,value),arr}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li>${value}</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{/each}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 該段語法的作用為將arr進行遍歷，并將其中每個屬性的value放入到li中，同樣，each語法也是需要閉合的。
? ? ? ??3、使用類語法
? ? ? ? ? ? ? ? $(selectpr).tmpl(data)
? ? ? ? ? ? ? ? $(selector)為選擇到的html模板，tmpl()之中的data就是所要傳入html模板的數據；舉個例子：
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{if data}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{each(index,value) data}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li class='${index.className}'>${index}</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{/each}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{/if}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>{rows.data}</span>
? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? 將上部文件作為html模板時在js中使用

? ? ? ? ? ? ? ? ? ? ? ? 使用：$(html模板的名字).tmpl(res);

? ? ? ? ? ? ? ? ? ? ? ? 實際上res為{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data":[12,23,12,12],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "rows":{'data':'1212121'},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "message": 0
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? 主要就是tmpl中的是數據，而且傳過去的數據就可以直接在里面獲取相應的值，然后對值進行操作。

? ?? ???以上語法基本為在項目中使用較多的，其余還有一些api，包括{{html}}、{{wrap}}等，但是使用范圍并不廣，故不多做介紹。
二、以上為日常開發使用模板中使用較多的api。jquery.tmpl.js在好用的同時也存在一些缺陷，其中比較明顯的就是，
? ? ? ??1、"="問題
? ? ? ? 將變量賦值作為模板放入標簽之中后，如果其中存在=的話，一定要在=的左右兩邊全部加上空格，否則會出現很多比較詭異的現象

三、結語：
? ? ? ? 該文章為本人純手碼，將知識整理并匯總，希望看到的小伙伴能從中得到一些收獲；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ------------@pandaClose

posted on 2017-09-08 16:23 pandaClose 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/pandaClose/p/7495233.html

總結

以上是生活随笔為你收集整理的jquery.tmplate使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。