jQuery Templates Plugin筆記1 – 黑暗執行緒

jQuery Templates Plugin筆記1

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 1jQuery 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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注