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?WT.mc_id=DOP-MVP-37580"
        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>


Comments

# by dxjd4

抓個錯字 XD 外"曾"再用一個<div>或<span>包起來就可以 測了一下,真的非常方便,感覺比輸出時在串HTML字串方便多了

# by Jeffrey

to dxjd4, 謝謝指正,已修改。 連用倉頡輸入都可以把"層"打成"曾",傳說中"沒有錯字就不是黑暗執行緒真跡",所言不虛呀~~ orz

# by Gary

黑大你好,我是個初學者 我有個問題想請教您 alert(this.innerHTML) 這個不是應該出現 <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> 這樣的內容嗎? 可是我在我的畫面上看到的是 <td>xxx</td><td>xxx</td><td>xxx</td> 是我觀念有錯嗎?謝謝

# by Jeffrey

to Gary, this指向的是<tr>...</tr>這個元素,因此innerHTML會傳回<tr>內含的元素的HTML(不包含<tr>本身),如果你是用IE測試,可以測一下alert(this.outerHTML),就可以看到含<tr>的HTML內容了。參考: http://bit.ly/gRTRQ9

# by Tim

請問一下黑暗大, 我有個需求是要將查詢出來的資料用表格的方式顯示, 但點了某一列後, 該列就要進入編輯模式, 編輯完要能存檔, 其實用GridView可以很快就做出來, 但又不想用GridView, 不知用這個jQuery Templete Plugin適不適合? 或是又其他建議的方式? 謝謝~

# by Jeffrey

to Tim, 滄海桑田... jQuery Template Plugin已走入歷史了,建議考慮Knockout.js (http://blog.darkthread.net/post-2012-05-09-knockout-js-intro.aspx) 或 AngularJS。

Post a comment