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学习点滴 call、apply的区别
Oct 22 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
基于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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php之Memcache学习笔记
2013/06/17 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
python发送邮件接收邮件示例分享
2014/01/21 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
基于python实现聊天室程序
2018/07/27 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
科学发展观活动总结
2014/08/28 职场文书
营销计划书范文
2015/01/17 职场文书
2015年手术室工作总结
2015/05/11 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers