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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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实现获取访问用户IP
2020/05/09 PHP
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
学Python 3的理由和必要性
2019/11/19 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
给男朋友的道歉信
2014/01/12 职场文书
高二地理教学反思
2014/01/24 职场文书
爱心捐助倡议书
2014/05/19 职场文书
改革共识倡议书
2014/08/29 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
教师求职自荐信范文
2015/03/04 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
法人身份证明书
2015/06/18 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript