Json2Template.js 基於jquery的外掛 繫結JavaScript物件到Html模板中

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

複製程式碼 程式碼如下:
$(“#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

if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = false;
var cb_blogId = 77643;
var cb_entryId = 2228585;
var cb_blogApp = “chenkun”;
var cb_blogUserGuid = “7a496d30-ab72-de11-be36-001cf0cd104b”;
var cb_entryCreatedDate = ‘2011/10/29 15:05:00’;

您可能感興趣的文章:

JavaScript模板引擎Template.js使用詳解template.js前端模板引擎使用詳解

相關文章

前端開發 最新文章