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

Post a comment