Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中_Javascript教程-查字典教程网
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:$("#div").bindTemplate({source:jsonobject,template:null|$("#t...

复制代码 代码如下:

$("#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">

<table width="100%">

<tr><th>编号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>

<tr>

<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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类