之前寫JS綁定數據曾經用過tmpl庫，雖然功能比較強大但是感覺不是很輕量，對於相對簡單的數據需求顯得有些臃腫。而Ajax返回數據自己拼接html的方式又顯得不夠高端，因此今天看了一篇介紹artTemplate的文章，覺得還不錯，便來體驗試用一下。
選擇artTemplate的原因有兩個：
1.使用簡單，輕量級。
2.性能比較高。
使用方式和tmpl類似，只需指定一個容器div和一個模板代碼，JS執行一個方法就可以實現綁定。
性能的話根據 高性能JavaScript模板引擎原理解析 提到的低版本瀏覽器使用數組push的方式，現代瀏覽器使用+=的方式性能更高，覺得性能應該還不錯，而且有報錯提示。
於是便寫了如下的Demo：
首先，先感受一下前台的數據展現：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ArtTempTest</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>1:2: <script src="JS/lib/template.js">1: </script>2: <script src="JS/tempTest.js">1: </script>2: </head>3: <body>4: <h2>ArtTemplate</h2>5: <!--模板容器-->6: <div id="container">7: </div>8: <!--使用script標簽來當作模板標簽，id為模板名-->9: <!--數據對象名要與后台js定義的數據屬性名稱一致，如list-->10: <script id="template" type="text/html">11: <h3><%=title%></h3>12: <ul id="mainContent">13: <%for(i = 0; i < list.length; i ++) { %>14: <li><dd>name: <span id="aName"></span> Category:<%=list[i].Category%> price:<%=list[i].Price%></dd></li>15: <%}%>16: </ul>17:</script>
</body>
</html>
值得注意的是綁定數據的時候需要自己寫個for循環，放在<% %>里，有種寫.net代碼的風格和親切感~
后台的js代碼是核心的數據綁定部分：
$(document).ready(function () {
// my test
$.getJSON('api/products/mytest')
.done(function (data) {
//alert(JSON.stringify(data));
//構造前台數據，構造數據的變量名可隨意起，前台只對應tempdata的各個屬性名。
//所以再簡單的json外面也要套一個tempdata，否則前台無法訪問
var tempData = [];
tempData.list = data;
tempData.title = "testTitle";
var html = template.render('template', tempData);
document.getElementById('container').innerHTML = html;
//每行數據的事件綁定
$("#mainContent").children("li").each(function (index) {//獲取模板div的第一個孩子節點，注意層次關系，其間不要穿插其他元素
var tTr = this;
var selectedItem = tempData.list[index];//獲取當前行數據對象，暫時使用數據索引方式訪問。
//綁定事件
var aButton = $(tTr).find("#aName");
aButton.append("<a href='#'>" + selectedItem.Name + "</a>");
aButton.click(function () {
alert(selectedItem.Name + "的Category是：" + selectedItem.Category);
});
});
});
});
其中需要注意的地方均在注釋中進行了說明。唯一的不方便之處就是對於每一行數據事件的支持以及獲取當前行數據的方式，沒有tmpl里簡單，還需要自己指定數據源對象，通過索引的方式來訪問。
最終的呈現效果如下：
P.S. 附上一段使用tmpl的代碼示例：
function GetData() {
//獲取許願牆數據
$.get(ControllerPath + "Heart/GetAllHeart", {}, function (data) {
$("#content_loading").hide();//fadeOut(100);
var jsonData = eval("(" + data + ")");
//alert(jsonData.table[1].title);
$("#ItemList").empty();
RenderTemplatefunction($("#ItemList"), $("#ItemTemplate"), jsonData.table);
$("#ItemList").children("dd").each(function (index) {
var tTr = this;
var selectedItem = $.tmplItem(this);
var tmp_title = $(tTr).find("#item_title");
var tmp_person = $(tTr).find("#item_person");
var tmp_date = $(tTr).find("#item_date");
var btnTitle = $(tTr).find("#btnTitle");
var bgNumber = "it" + Math.floor(Math.random() * 10 + 9) + ".jpg"; //1-10的隨機數
var bg = $(tTr).find(".bg");
bg.css('background-image', "url('../Content/img/bg/" + bgNumber + "')");
var getRandomColor = function () {
return (function (m, s, c) {
return (c ? arguments.callee(m, s, c - 1) : '#') +
s[m.floor(m.random() * 16)]
})(Math, '0123456789abcdef', 5)
}
var Color = getRandomColor();
$(tTr).find("#item_title").css('color', Color.toString());
//綁定數據
tmp_title.html(selectedItem.data.title);
tmp_person.html(selectedItem.data.pubName);
tmp_date.html(selectedItem.data.addDate.toString().split(' ')[0].replaceAll('/', '-').toString());
btnTitle.click(function () {
var heart_date = "";
if (selectedItem.data.beginDate.toString() == selectedItem.data.endDate.toString()) {
heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-');
}
else {
heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-') + " 至 " + selectedItem.data.endDate.toString().split(' ')[0].replaceAll('/', '-');
}
$("#heart_title").html(selectedItem.data.title);
$("#heart_content").html(selectedItem.data.content);
$("#heart_date").html(heart_date);
$("#heart_person").html(selectedItem.data.participator);
$("#heart_contact").html(selectedItem.data.contact);
$("#heatr_puber").html(selectedItem.data.pubName);
//ShowBox
this.href = "#heartInfo_content";
$(this).addClass("heartInfo_inline");
$("#heartInfo_content").show();
showDialog();
});
});
});
}