jQuery Templates Plugin筆記3
0 | 10,094 |
在範本套用的運用中,有時會需要參考背後的資料物件。舉例來說: 某個資料物件有六個屬性,範本的HTML只顯示了其中三個,當使用者點選該筆資料時,要以AJAX方式查詢細節資訊,此時需要未顯示的三個屬性當成查詢參數。依過往的做法,我常用<td propName=”propValue”>方式將資料藏在HTML元素屬性解決問題,而jQuery Templates提供了更直覺的做法 – .tmplItem()。
運作概念很簡單,假設我們透過.tmpl()方式,將一筆資料物件套用範本轉換成<tr>元素,則透過$(該筆tr元素).tmplItem()就可取得該範本項目的資料結構,多了幾個屬性可資利用:
.nodes 指向套用範本所產生的DOM元素,通常的應用方式是$(nodes元素)後進行jQuery操作
.data 指向套用在範本上的資料物件,方便取得資料物件的全部屬性
另外,.tmplItem()還有一個有趣的應用。在取得.data後,我們可以動態修改資料物件的屬性,然後呼叫tmplItem().update()。登楞!! jQuery Templates會馬上用更新後的資料物件重新套用範本,立即刷新網頁元素~~ 酷!!
排版顯示純文字
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Templates Lab 3 -- 用tmplItem()存取資料來源物件</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 }
];
//將結果附加到DOM顯示出來
$("#tmplItem").tmpl(data, { propTest: "Test" }).appendTo("#tb");
//利用tmplItem()可以取出範本套用的原始物件
var tmplItem = $("#tb tr:eq(1)").tmplItem();
//tmplItem.nodes可存取套版產出的HTML元素集合
//在本例中就是<tr>
for (var i = 0; i < tmplItem.nodes.length; i++)
alert(tmplItem.nodes[i].innerHTML);
//加上外框
$(tmplItem.nodes).find("td").css("border", "solid 1px red");
//tmplItem.data可以取得套範本的原始資料物件
var data = tmplItem.data;
var msg = [];
for (var p in data)
msg.push(p + "=>" + data[p]);
alert(msg.join("\n"));
//也可存取$tmpl()傳入的自訂函數與變數,但用處不大
alert(tmplItem.propTest);
//還有一個神奇的玩法,可以修改來源資料物件後,重新套用範本
data.Name = "*Darkthread*";
data.Score = 100;
tmplItem.update();
});
</script>
</head>
<body>
<table><tbody id="tb"></tbody></table>
</body>
</html>
Comments
Be the first to post a comment