寫過ASP/PHP的人一定對<td><%= SomeVar %></td>這類HTML穿插程式的寫法不會太陌生。先寫好HTML,再把將動態產生的值嵌入其中,設計及閱讀起來都很直覺,我一直認為它是讓ASP/PHP大受歡迎的主要原因。

而同樣概念能否應用在Javascript產生HTML的過程中呢? 以前提過ASP.NET Client Templates,發明了{{SomeProp}}語法,便有異曲同工之妙。而萬流歸宗,方便好用的模式或概念,總是會在各語言平台中以不同形式出現,微軟最近提議在jQuery核心納入John Resig的JavaScript Micro-Templating引擎,將有利於更方便地發展DataGrid等應用。

看過相關文件,在此做個簡介。直接看Code,了解一下它長什麼樣子比較快:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.tmpl.js" type="text/javascript"></script>
    <style type="text/css">
        .dvFrame { border: solid 1px blue; margin: 5px; width: 200px; }
        .dvHeader { background-color: yellow; padding: 3px; }
        .dvScore { color:red; font-size: 20pt; padding: 5px; }
    </style>
    <script type="text/html" id="myTmpl">
    <div class="dvFrame">
        <div class="dvHeader">
            {%= $i+1 %} of {%= $context.data.length %}. {%= name %}
        </div>
        <div class="dvScore">
            {%= score %}
        </div>
    </div>
    </script>
    <script type="text/javascript">
        $(function () {
            var players = [
                { name: "Darkthread", score: 32767, regDate: "2010/03/20" },
                { name: "Jeffrey", score: 65535, regDate: "2010/03/21" }
            ];
            $("#myTmpl").render(players).appendTo("body");
        });
    </script>
</head>
<body>
</body>
</html>

程式中jquery.tmpl.js是.NET jQuery Extension小組提供的Plug-In範例,可以由github取得。注意程式中黄底部分,用<script type="text/html">來封裝樣版定義,在非頁面區直接寫HTML標籤的點子很酷! 主要的語法是{%= propName %},呈現時該語法會被置換成資料物件的propName屬性,頗為直覺,當然,必要時可再加上格式化或運算邏輯,例如: {%= $.Darkthread.tools.simpFormat(“{0:N2}”, cashAmount * 1.2) %}

在以上範例中,有個$context變數可提供額外資訊,$context的屬性包含:

  • data: 完整的資料陣列物件,在以上案例中就是players
  • dataItme: 目前處理的資料物件
  • index: dataItem在資料陣列中的序號
  • options: 呼叫render()時額外傳入的參數,例如: render(players, { showHeader: true })時options = { showHeader: true }

另外,最常用到的序號及資料物件另有別名變數方便利用: $i = $context.index, $data = $context.dataItem

如果需要在套範本過程中加入自訂邏輯,有兩個事件:

function rendering(context) {
    //可以context.dataItem.someProp = blah來動態調整其屬性
    //若要跳過該筆資料不處理,可透過return false;控制
}

function rendered(context, dom) {
    //本事件會發生於範本套用結果物件產生後,還沒加到網頁DOM之前
    //透過$(dom).click之類的方式,我們可以加掛一些事件
}

感覺上這個jQuery範本Plug-In在設計及應用上頗為輕巧簡潔。不過,微軟雖然將jQuery納入產品線並提供技術支援,但jQuery仍是Open Source專案,微軟是以社群成員的方式參與jQuery發展,並不能直接制定規格。因此,這個提議最後會不會納入成為jQuery Core,仍是未定之數,但依John Resig的說法,我認為可能性蠻高的。


Comments

# by 小煎

請問是 jq version 1.4+ 嗎?

# by Jeffrey

to 小煎, 這個目前只是提案,將來是否會併入核心或是以Plug-In方式叫用仍未知。但現階段如果想用,參考我的範例程式掛上jquery.tmpl.js就成了。

# by andy

ASP.NET AJAX Client Templates在VS 2010 RC版中沒看到?

# by kk

先run一遍才有東西看的意思嗎?

Post a comment


66 - 6 =