jQuery Templates Plugin筆記1

最新推荐文章于 2024-06-13 02:48:16 发布

weixin_30674525

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量90

点赞数

文章标签： javascript xhtml php ViewUI

原文链接：http://www.cnblogs.com/vs2012/archive/2011/07/12/2104322.html

版权

2008年9月，微軟宣告將jQuery納入ASP.NET解決方案，之後更以社群成員的身分參與jQuery開發，今年3月，微軟則提出將jQuery Templates(範本)概念納入jQuery核心的提議。所謂jQuery Templates，指在Javascript中實作如同ASP/ASP.NET、PHP在HTML中參雜程式標記，讓資料、變數與HTML標籤自動結合產生網頁的概念。

2010 年10月，微軟與jQuery開發團隊、開發社群攜手開發的jQuery Templates、jQuery Data Link、jQuery Globalization三個Plugin被官方採納，成為正式的jQuery官方Plugin，目前在jQuery API文件裡，已經可以看到jQuery Templates plugin beta 1、jQuery Data Link plugin beta的說明。

重新檢視jQuery Templates的設計，發現一件有趣的事: 早在轉向jQuery前，微軟已有自己的Javascript範本解決方案--ASP.NET Client Templates，當時使用的資料內嵌標籤語法是{{變數名稱}}。而在2010年3月剛提出jQuery Templates構想時，當時使用的語法變成{%= 變數名稱%}，很有<%= … %> ASP語法的fu。而現在看到的jQuery Templates資料語法又做了大幅修改，變成: ${變數名稱}，而一些特殊標籤如{{each …}}、{{html ...}}，則又再度展現ASP.NET Client Templates的風味，頗有意思。

在Client端透過範本概念簡化程式的哲學一向深得我心，所以ASP.NET Client Templates、jQuery Templates等解決方案特別能吸引我的注意。幾個月前得知jQuery Templates正式列入官方Plugin的消息，前陣子因為工作繁忙Lag了一陣子，最近才開始補進度，好好檢視了jQuery Templates plugin。

一邊研讀，順手整理了一系列程式筆記，以實際程式示範相關函數、語法，當作學習的註腳(其實是為了自己無可救藥的爛記性)，一併跟大家分享。

先從第一個基本應用範例開始。以<script type=”text/x-query-tmpl” id=”xxx”>包夾範本的內容，要替換成資料內容的部分，使用${變數名稱}的語法。用$("#xxx”).tmpl(資料物件陣列)方式，就可以將資料套進範本裡，對於資料陣列來說，.tmpl()會一一針對陣列中的每個資料物件產生一個HTML DOM元素，而.tmpl()傳回的就是這些DOM元素的集合(在程式中我用for迴圈加alert驗證這一點)，最後，用.appendTo()之類的方法將它於安插進網頁DOM中就大功告成了。

除了用<script type=”text/x-jquery-tmpl”>方式放置範本，也可選擇將其放在HTML DOM裡(但必須要藏起來)，或是直接傳入HTML標籤字串(需要外套一個容器元素)，相形之下，我想用<script>的方式還是上選。

程式範例如下:

排版顯示純文字

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>jQuery Templates Lab 1 - tmpl()基本示範</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"

        type="text/javascript"></script>

    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"

        type="text/javascript"></script>

    <script type="text/x-jquery-tmpl" id="tmplItem">

        <tr><td>${No}</td><td>${Name}</td><td>${Score}</td></tr>

    </script>

    <script type="text/javascript">

        $(function () {

            //宣告簡單的資料物件陣列

            var data = [

                { No: 1, Name: "Jeffrey", Score: 59 },

                { No: 2, Name: "Darkthread", Score: 75 },

                { No: 3, Name: "Linda", Score: 96 }

];

            //傳入data為Array時，傳回結果是個集合

            $("#tmplItem").tmpl(data).each(function () {

                alert(this.innerHTML);

});

            //將結果附加到DOM顯示出來

            $("#tmplItem").tmpl(data).appendTo("#tb");

            //不另外宣告<script>區塊放樣版，直接內嵌範本HTML也是可行的

            //但由於內嵌HTML的.html()才算真正範本的部分，所以外面要加一個容器

            //一般<li> <span> <div>，外曾層再用一個<div>或<span>包起來就可以

            //本例中因為是<tr>，要用<tbody>才算嚴謹，再不然用<script>包夾也可以

            $("<tbody><tr><td colspan='3'>${No}.${Name} => ${Score}</td></tr></tbody>")

            .tmpl(data).appendTo("#tb");

            //或者，我們也可以將範本HTML藏在網頁中，一樣用selector去找到它，

            //但是必須用display:none或其他方法藏起來

            //相較之下，我認為還是<script type="text/x-jquery-template">最方便

            $("#hiddenTemplateDOM").tmpl(data).appendTo("#tb");

});

    </script>

</head>

<body>

<!-- 資料套用範本後，附加到<tbody id="tb">顯示出來 -->

<table><tbody id="tb"></tbody></table>

<!-- 以下示範Template藏在網頁內部 -->

<table style="display:none"><tbody id="hiddenTemplateDOM">

<tr style="background-color:#cccccc">

<td>${No}</td><td colspan="2">${Name} - ${Score}</td>

</tr>

</tbody></table>

</body>

</html>

转载于:https://www.cnblogs.com/vs2012/archive/2011/07/12/2104322.html

weixin_30674525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Templates Plugin筆記1

2008年9月，微軟宣告將jQuery納入ASP.NET解決方案，之後更以社群成員的身分參與jQuery開發，今年3月，微軟則提出將jQuery Templates(範本)概念納入jQuery核心的提議。所謂jQuery Templates，指在Javascript中實作如同ASP/ASP.NET、PHP在HTML中參雜程式標記，讓資料、變數與HTML標籤自動結合產生網頁的概念。2010年...
复制链接

扫一扫