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 常用方法总结
Jun 03 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 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 xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP重载基础知识回顾
2020/09/10 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Python中max函数用法实例分析
2015/07/17 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python遍历pandas数据方法总结
2018/02/09 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
python 线程的五个状态
2020/09/22 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
《有趣的发现》教学反思
2014/04/15 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
React实现动效弹窗组件
2021/06/21 Javascript