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 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
js实现列表按字母排序
Aug 11 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实现网上点歌(二)
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
node 版本切换的实现
2020/02/02 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python 字典套字典或列表的示例
2019/12/16 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
详解python变量与数据类型
2020/08/25 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
MySQL面试题
2014/01/12 面试题
学校领导班子群众路线整改措施
2014/09/16 职场文书
新教师教学工作总结
2015/08/14 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Python 数据科学 Matplotlib图库详解
2021/07/07 Python