搜尋
首頁php教程PHP开发用模版產生HTML的框架jquery.tmpl使用詳解

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

高洛峰
高洛峰
Dec 19, 2016 am 09:23 AM

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

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

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

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

下面重點介紹一下使用方法：

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

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

var markup = "<li>Some content: ${item}.<br/>" 
+ " More content: ${myValue}.</li>";
$.template( "movieTemplate", markup );
<script id="movieTemplate" type="text/x-jquery-tmpl"> 
<li><b>${Name}</b> (${ReleaseYear})</li> 
</script>

這樣就定義了兩種模板，前一種寫到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的幾個常用標籤分別有：

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

不常用標籤

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

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

範例：

<div id="div_demo">
</div>
<script id="demo" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
    　　<span>${ID}</span>
    　　<span style="margin-left:10px;">{{= Name}}</span>
    　　<span style="margin-left:10px;">${Number(Num)+1}</span>
    　　<span style="margin-left:10px;">${Status}</span>
    </div>
</script>
<script type="text/javascript">
　　var users = [{ ID: &#39;think8848&#39;, Name: &#39;Joseph Chan&#39;, Num: &#39;1&#39;, Status: 1 }, { ID: &#39;aCloud&#39;, Name: &#39;Mary Cheung&#39;, Num: &#39;2&#39;}];
　　$("#demo").tmpl(users).appendTo(&#39;#div_demo&#39;);
</script>

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

範例：

<div id="div_each">
</div>
<script id="each" type="text/x-jquery-tmpl"> 
    <h3 id="users">users</h3>
    {{each(i,user) users}}
        <div>${i+1}:{{= user.name}}</div>
        {{if i==0}}
            <h4 id="group">group</h4>
            {{each(j,group) groups}}
                <div>${group.name}</div>
            {{/each}}
        {{/if}}
    {{/each}}
    <h3 id="depart">depart</h3>
    {{each departs}}
        <div>{{= $value.name}}</div>
    {{/each}}
</script> 
<script type="text/javascript">
　　var eachData = { users: [{ name: &#39;jerry&#39; }, { name: &#39;john&#39;}], groups: [{ name: &#39;mingdao&#39; }, { name: &#39;meihua&#39; }, { name: &#39;test&#39;}], departs: [{ name: &#39;IT&#39;}] };
　　$("#each").tmpl(eachData).appendTo(&#39;#div_each&#39;);
</script>

{{if }} {{else}}提供了分支邏輯{{else}} 相當於else if

範例：

<div id="div_ifelse"></div>
<script id="ifelse" type="text/x-jquery-tmpl"> 
    <div style="margin-bottom:10px;"><span>${ID}</span><span style="margin-left:10px;">{{= Name}}</span>
        {{if Status}}
            <span>Status${Status}</span>
        {{else App}}
            <span>App${App}</span>
        {{else}}
            <span>None</span>
        {{/if}}
    </div>
</script> 
<script type="text/javascript">
　　var users = [{ ID: &#39;think8848&#39;, Name: &#39;Joseph Chan&#39;, Status: 1, App: 0 }, { ID: &#39;aCloud&#39;, Name: &#39;Mary Cheung&#39;, App: 1 }, { ID: &#39;bMingdao&#39;, Name: &#39;Jerry Jin&#39;}];
    $("#ifelse").tmpl(users).appendTo(&#39;#div_ifelse&#39;);
</script>

{{html }} 輸出變數html,但是沒有html編碼，適合輸出html程式碼

 實例

<div id="div_html"></div>
<script id="html" type="text/x-jquery-tmpl"> 
    <div style="margin-bottom:10px;">
　　　　<span>${ID}</span>
　　　　<span style="margin-left:10px;">{{= Name}}</span>
    　　${html}
    　　{{html html}}
    </div>
</script> 
<script type="text/javascript">
　　var user = { ID: &#39;think8848&#39;, Name: &#39;Joseph Chan&#39;, html: &#39;<button>html</button>&#39; };
  　$("#html").tmpl(user).appendTo(&#39;#div_html&#39;);
</script>

{{tmpl}} 巢狀模版

實例

<div id="tmpl"></div>
<script id="tmpl1" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
    　　<span>${ID}</span>
    　　<span style="margin-left:10px;">{{tmpl($data) &#39;#tmpl2&#39;}}</span>
    </div>     
</script>
<script id="tmpl2" type="type/x-jquery-tmpl">
    {{each Name}}${$value}  {{/each}}   
</script>
<script type="text/javascript">
　　var users = [{ ID: &#39;think8848&#39;, Name: [&#39;Joseph&#39;, &#39;Chan&#39;] }, { ID: &#39;aCloud&#39;, Name: [&#39;Mary&#39;, &#39;Cheung&#39;]}];
   $("#tmpl1").tmpl(users).appendTo(&#39;#tmpl&#39;);
</script>

{{wrap}},包裝器

實例

<div id="wrapDemo">
    </div>
<script id="myTmpl" type="text/x-jquery-tmpl">
    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        <h3 id="One">One</h3>
        <div>
            First <b>content</b>
        </div>
        <h3 id="Two">Two</h3>
        <div>
            And <em>more</em> <b>content</b>...
        </div>
    {{/wrap}}
    </script>
<script id="tableWrapper" type="text/x-jquery-tmpl">
    <table cellspacing="0" cellpadding="3" border="1"><tbody>
        <tr>
            {{each $item.html("h3", true)}}
                <td>
                    ${$value}
                </td>
            {{/each}}
        </tr>
        <tr>
            {{each $item.html("div")}}
                <td>
                    {{html $value}}
                </td>
            {{/each}}
        </tr>
    </tbody></table>
    </script>
 <script type="text/javascript">
        $(function () {
            $(&#39;#myTmpl&#39;).tmpl().appendTo(&#39;#wrapDemo&#39;);
        });
    </script>

{{wrap}},包裝器data $item $item代表目前的範本；$data代表目前的資料。

 實例：

<div id="div_item_data"></div>
<script id="item_data" type="text/x-jquery-tmpl"> 
     <div style="margin-bottom:10px;">
　　　　<span>${$data.ID}</span>
　　　　<span style="margin-left:10px;">${$item.getName(" ")}</span>
　　　</div>
</script> 
<script type="text/javascript">
 　　var users = [{ ID: &#39;think8848&#39;, Name: [&#39;Joseph&#39;, &#39;Chan&#39;] }, { ID: &#39;aCloud&#39;, Name: [&#39;Mary&#39;, &#39;Cheung&#39;]}];
     $("#item_data").tmpl(users,
                {
                getName: function (spr) {
                   return this.data.Name.join(spr);
                }
                }).appendTo(&#39;#div_item_data&#39;);
</script>

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

實例

<script type="text/javascript">
　　$(&#39;#demo&#39;).delegate(&#39;div&#39;, &#39;click&#39;, function () {
                var item = $.tmplItem(this);
                alert(item.data.Name);
            });
</script>

版的模樣
版

jquery.tmpl使用詳解相關文章請關注PHP中文網！


陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前ByDDD
Inzoi：如何申請學校和大學
3 週前ByDDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前ByDDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7814
15
Java教學
1646
14
CakePHP 教程
1402
52
Laravel 教程
1300
25
PHP教程
1236
29
顯示更多