微軟提議在jQuery核心支援範本功能
4 | 10,063 |
寫過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一遍才有東西看的意思嗎?