Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中


Posted in Javascript onOctober 29, 2011
$("#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运行一下看看效果

Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中

比较简单,鉴于从理论上来讲它确实还不错, 故推荐给大家!希望对你有帮助

源代码: Sample.Json2Template.rar

Javascript 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 #Javascript
基于jquery的无限级联下拉框js插件
Oct 29 #Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 #Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 #Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 #Javascript
js常用代码段收集
Oct 28 #Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 #Javascript
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python绘制动态曲线教程
2020/02/24 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
旅游项目开发策划书
2014/01/18 职场文书
总经理人事任命书
2014/06/05 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL