Json2Template.js 基於jquery的外掛程式 綁定JavaScript對象到Html模板中

複製代碼 代碼如下:$("#div").bindTemplate({
source : json object,
template : null | $("#template") | "<div>{{object}}</div>",
dateFormat : "d.m.y",
tagOpen : "{{",
tagClose : "}}"
});

bindTemplate(data) : 綁定資料對象到模板的操作方法

source : json 格式的資料來源

template :

null 不提供模板,InnerHtml輸出
$(“#template”) 利用頁面上定義好的html結構作為模板
“<div>{{...}}</div>” 直接定義模板
dateFormat : 時間的格式化方式

tagOpen : 開始的標記標籤

tagClose : 結束的標記標籤

其中dateFormat, tagOpen, tagClose都可以為null採用預設的配置, 有必要說一下預設的tagOpen & tagClose是用”{{” 和 ”}}”標記的

Json2Template 的應用
下面我們通過一下小例子來看看Json2Template的簡單用法

建立一個MVC3的空項目

首先我們需要一個對象來儲存傳遞的資料 複製代碼 代碼如下:public class UserInfo
{
public int ID { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string Address { get; set; }
}

虛擬一個資料集合, 因為實際的應用情境中是通過查詢資料庫得到的 複製代碼 代碼如下:private IList<UserInfo> InitUserInfo()
{
IList<UserInfo> users = new List<UserInfo>();
users.Add(new UserInfo() { ID = 1, Name = "Chenkun", Age = 21, Address = "Suzhou" });
users.Add(new UserInfo() { ID = 2, Name = "Zhangsan", Age = 21, Address = "Beijing" });
users.Add(new UserInfo() { ID = 3, Name = "Lisi", Age = 21, Address = "Henan" });
users.Add(new UserInfo() { ID = 4, Name = "Wangwu", Age = 21, Address = "Shanghai" });
users.Add(new UserInfo() { ID = 5, Name = "Zhaoliu", Age = 21, Address = "Guangzhou" });
users.Add(new UserInfo() { ID = 6, Name = "Huqi", Age = 21, Address = "Chongqing" });
return users;
}

這些基礎的東西準備好了, 我們需要把這個集合序列化成json一便提供給Json2Template使用, 這裡我採用Newtonsoft.Json! 這裡我們需要定義個Action 複製代碼 代碼如下:public JsonResult GetUserInfo()
{
return Json(Newtonsoft.Json.JsonConvert.SerializeObject(InitUserInfo()), JsonRequestBehavior.AllowGet);
}

序列化我們的集合為json 並且啟用Get請求以便ajax通過Get方式調用

添加對json2template.js的引用後我們就開始一個ajax請求, 來擷取背景json資料, 再把擷取的資料通過bindTemplate來幫定到HTML模板中顯示出來

首先我們定義個簡單的HTML模板: 複製代碼 代碼如下:<div id="template-userinfo" style="display: none">
<table width="100%">
<tr><th>編號</th><th>姓名</th><th>年齡</th><th>地址</th></tr>
<tr class="{{item}}">
<td>{{ID}}</td>
<td>{{Name}}</td>
<td>{{Age}}</td>
<td>{{Address}}</td>
</tr>
</table>
</div>

{ 注意:把{{item}}定義到class中表示遍曆item對象的子集類似forearch }

再定義一個用來輸出這個模板的html容器 複製代碼 代碼如下:<div id="userlist"></div>

最後按照我們事先構想好的方式來請求json 資料並幫定模板 複製代碼 代碼如下:<script type="text/javascript">
$(document).ready(function () {
var dataSouce = {};
$.ajax(
{
url: '/home/getuserinfo',
dataType: "json",
success: function (data) {
dataSouce.item = JSON.parse(data);
$("#userlist").bindTemplate({ source: dataSouce, template: $("#template-userinfo") });
}
});
});
</script>

F5運行一下看看效果

比較簡單,鑒於從理論上來講它確實還不錯, 故推薦給大家!希望對你有協助

原始碼: Sample.Json2Template.rar