用模版產生HTML的的框架jquery.tmpl使用詳解_jquery

動態請求資料來更新頁面是現在非常常用的方法，例如部落格評論的分頁動態加載，微博的滾動加載和定時請求加載等。

這些情況下，動態請求回傳的資料一般不是已拼好的 HTML 就是 JSON 或 XML，總之不在瀏覽器端拼資料就在伺服器端拼資料。不過，從傳輸量方面來看，回傳 HTML 不划算，而在 web 傳輸方面，現在更多的是使用 JSON 而不是 XML。

瀏覽器端根據 JSON 產生 HTML 有個很苦惱的地方就是，結構不複雜的時候還好，結構一複雜，就想死了，需要很小心很小心地寫出幾乎無法維護的 JavaScript 程式碼。

因此一些用模版產生HTML的的框架相繼出現jquery.tmpl 就是其中的一種，下面我們來詳細介紹下jquery.tmpl的用法

以下重點介紹使用方法：

先介紹一下  範本和數據，不用說這兩個肯定是不可缺少的

模板有兩種定義方法，以下給出具體code

複製程式碼 程式碼如下:

var markup = "

Some content: ${item}.
"
" More content: ${myValue}.

";

$.template( "movieTemplate", markup );

 

複製程式碼 程式碼如下:

這樣定義了兩種模板，前一種寫到script裡邊，後邊一種寫到html裡邊

資料用json

下面開始渲染模板

複製程式碼 程式碼如下:

$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );
$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );

注意：movies是json資料數組

複製程式碼 程式碼如下:

var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];

jquery.tmpl的幾個常用標籤分別有：

${}, {{each}}, {{if}}, {{else}}, {{html}}

不常用標籤

 {{=}},{{tmpl}} and {{wrap}}.

${}等同與{{=}}是輸出變數 ${}裡面還可以放表達式 （=和變數之間一定要有空格，否則無效）

範例：

複製程式碼 程式碼如下:

{{each}} 提供迴圈邏輯，$value存取迭代變數 也可以自訂迭代變數(i,value)

範例：

複製程式碼 程式碼如下:

   

使用者

    {{每個(i,user)個使用者}}
       

${i 1}:{{= user.name}}

        {{如果我==0}}
           

組

            {{每個(j,group)組}}
               

${group.name}

            {{/每個}}
        {{/如果}}
    {{/每個}}
   

出發

    {{各自出發}}
       

{{= $value.name}}

    {{/每個}}
腳本>

var everyData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'} ]，出發：[{ name: 'IT'}] };
　　$("#each").tmpl(eachData).appendTo('#div_each');
腳本>

{{if }} {{else}}提供了分支邏輯 {{else}} 間接 else if

範例：

複製程式碼程式碼如下：

${ID}{{= 名稱}}
        {{若狀態}}
            狀態${狀態}
        {{其他應用}}
            應用${應用}
        {{其他}}
            無
        {{/如果}}
   

腳本>

var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: ' bMingdao', Name: 'Jerry Jin'}];
    $("#ifelse").tmpl(users).appendTo('#div_ifelse');
腳本>

{{html}} 輸出變數html，但沒有html編碼，適合輸出html代碼

 實例

複製程式碼程式碼如下：

   

　　　　${ID}
　　　　{{= 名稱}}
    　　${html}
    　　{{html html}}
   

腳本>

　　var user = { ID: 'think8848', 姓名: 'Joseph Chan', html: 'html' };
  　$("#html").tmpl(user).appendTo('#div_html');
腳本>

{{tmpl}} 婚紗模版

實例

複製程式碼程式碼如下：

   

    　　${ID}
    　　{{tmpl($data) '#tmpl2'}}
   

    
腳本>

    {{每個名稱}}${$值}  {{/每個}}  
腳本>

　　var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
   $("#tmpl1").tmpl(users).appendTo('#tmpl');
腳本>

{{wrap}}，包裝器

實例

複製程式碼程式碼如下：

   

       

兩個

       

            還有更多 內容物...
       

    {{/換行}}
    腳本>

 $.tmplItem()方法，使用這個方法，可以取得從render出來的元素上重新取得$item

實例

複製程式碼 程式碼如下: