jQuery Templates Plugin筆記3

2010-12-07 08:59 AM

在範本套用的運用中，有時會需要參考背後的資料物件。舉例來說: 某個資料物件有六個屬性，範本的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>

jQuery Templates Plugin筆記3

Comments

Post a comment