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>