DIV CSS 佈局教程網

代碼如下:
$("#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