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