快捷導(dǎo)航

Json2Template.js 基于jquery的插件綁定JavaScript對(duì)象到Html模板中

更新時(shí)間：2011年10月29日 19:03:05 作者：

Json2Template.js是一個(gè)Jquery插件, 用來綁定JavaScript對(duì)象到Html模板中

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

bindTemplate(data) : 綁定數(shù)據(jù)對(duì)象到模板的操作方法

source : json 格式的數(shù)據(jù)源

template :

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

tagOpen : 開始的標(biāo)記標(biāo)簽

tagClose : 結(jié)束的標(biāo)記標(biāo)簽

其中dateFormat, tagOpen, tagClose都可以為null采用默認(rèn)的配置, 有必要說一下默認(rèn)的tagOpen & tagClose是用”{{” 和 ”}}”標(biāo)記的

Json2Template 的應(yīng)用
下面我們通過一下小例子來看看Json2Template的簡(jiǎn)單用法

創(chuàng)建一個(gè)MVC3的空項(xiàng)目

首先我們需要一個(gè)對(duì)象來存儲(chǔ)傳遞的數(shù)據(jù)

復(fù)制代碼代碼如下:

 
public class UserInfo 
{ 
public int ID { get; set; } 
public string Name { get; set; } 
public int Age { get; set; } 
public string Address { get; set; } 
} 

虛擬一個(gè)數(shù)據(jù)集合, 因?yàn)閷?shí)際的應(yīng)用場(chǎng)景中是通過查詢數(shù)據(jù)庫(kù)得到的

復(fù)制代碼代碼如下:

 
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; 
} 

這些基礎(chǔ)的東西準(zhǔn)備好了, 我們需要把這個(gè)集合序列化成json一便提供給Json2Template使用, 這里我采用Newtonsoft.Json! 這里我們需要定義個(gè)Action

復(fù)制代碼代碼如下:

 
public JsonResult GetUserInfo() 
{ 
return Json(Newtonsoft.Json.JsonConvert.SerializeObject(InitUserInfo()), JsonRequestBehavior.AllowGet); 
} 

序列化我們的集合為json 并且啟用Get請(qǐng)求以便ajax通過Get方式調(diào)用

添加對(duì)json2template.js的引用后我們就開始一個(gè)ajax請(qǐng)求, 來獲取后臺(tái)的json數(shù)據(jù), 再把獲取的數(shù)據(jù)通過bindTemplate來幫定到HTML模板中顯示出來

首先我們定義個(gè)簡(jiǎn)單的HTML模板:

復(fù)制代碼代碼如下:

 
<div id="template-userinfo" style="display: none"> 
<table width="100%"> 
<tr><th>編號(hào)</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對(duì)象的子集類似forearch }

再定義一個(gè)用來輸出這個(gè)模板的html容器

復(fù)制代碼代碼如下:

最后按照我們事先構(gòu)想好的方式來請(qǐng)求json 數(shù)據(jù)并幫定模板

復(fù)制代碼代碼如下:

 
<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運(yùn)行一下看看效果