位置: 编程技术 - 正文

jquery dataview数据视图插件使用方法(jquery data-)

编辑:rootadmin

推荐整理分享jquery dataview数据视图插件使用方法(jquery data-),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery viewer,jquery data-id,jquery设置data,jquery viewer,jquery viewer,jquery data-id,jquery data-,jquery.data,内容如对您有帮助,希望把文章链接给更多的朋友!

jquery-dataview是一个超轻量的jquery插件,用于对DOM进行数据填充与更新,也很适合根据DOM模板创建对象。

与一些纯模板库(例如juicer)相比,它不仅能提供根据模板填入数据、支持循环、支持条件创建等功能,还支持绑定事件,最重要的是,在创建完DOM对象后,这些对象(称为数据视图)关联到原始数据,修改数据后,相应的视图也得以更新。

与一些支持数据驱动或MVVM模式的库(例如vue)相比,它没有去做数据绑定等高级自动化的机制,那涉及诸多复杂逻辑,比如属性依赖管理等,使用者如果了解不多,很可能写出低效的代码,或触发一连串未曾预料的后果。比如在一个列表中,只更新其中一条数据的某个属性,就可能导致刷新整个列表,甚至发起与后端的多次不必要交互。

jquery-dataview插件的设计理念是简单而灵活,它不采用极其复杂的自动化更新机制,而是允许人为精准控制更新时机与更新区域;同时,它最小化并压缩后仅2K不到,很适合在移动端开发使用。

下面介绍几个入门例子。

为DOM对象填充数据

例:对一个DOM赋值

HTML:

JS填充数据:

它会递归遍历所有带name属性的结点,如<span name="id"></span>会用customer.id为其赋值。

JS修改数据后,可无参数调用dataview来刷新显示:

获取DOM绑定的数据:

var data = $(".customer").dataview('getData');

为模板填充数据

这个例子在项目中更加常用,展示根据模板创建DOM、填充数据并插入文档中。

HTML: 客户列表

JS: 根据“客户”模板创建客户并插入列表中。

循环创建、条件创建、条件显示

子对象数组可以以dv-for属性来指定循环展开。

jquery dataview数据视图插件使用方法(jquery data-)

dv-if及dv-show属性:根据该属性的值计算是否创建或显示该结点。

例:使用dv-for, dv-if, dv-show等标签:

HTML:

JS:

上例中,由data.customers子数组循环创建DOM,其中id=1的customer没有创建,因为不满足dv-if="id>="的条件;而id=的那个customer由于不满足dv-show="id<="的条件,因而id没有显示出来。

指定事件

dataview不仅绑定数据,还可以用dv-on属性绑定事件,在JS中使用选项events与其对应。

<div dv-on="liOrder_click"></div>

事件名必须是{对象名}_{事件名}的格式。 上面代码最终相当于调用jo.on("click", data, liOrder_click),绑定的数据会通过event.data传递给回调函数,因而在回调函数中处理数据特别方便。

用到的函数必须通过events选项定义:

与直接使用原生支持的onclick属性相比,使用dv-on属性的好处是事件处理函数不必是全局函数,而且事件处理函数的参数ev.data即是DOM绑定的数据,非常方便。

多层嵌套的数据

对复杂的多层次嵌套数据的支持是dataview插件的一大亮点。 通过精巧的设计,它不仅做到填充数据时特别简单,而且在更新数据时,允许自由地更新任意区域,行为易懂且效率很高。

JS数据:一个customer-客户,它包含id, name等普通属性,包含一个子对象addr-地址信息,还包含一个子对象数组orders-订单。 每个订单中,又包含一个子对象数组items-物料信息。

HTML数据视图,展示客户、订单、物料三层数据:

JS:

上面只是多层次数据的简单的用法介绍,通过子对象的$parent属性可以取到上次对象。 实际使用时,常会把这些特性同计算属性、事件绑定结合起来,你会发现它会让取数据和更新视图的代码简单、灵活、易懂。

结语

作为一个超轻量级的具有数据驱动视图概念的库,推荐在项目中使用,可为让你的代码更清晰简练。 上面只是一个简单的介绍,更多如计算属性等功能可参考它的文档。

附github地址(其中有源码、文档和示例代码):

详解jQuery中的DOM操作 大致介绍jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象。jQuery中的DOM操作看看DOM操作都有哪些逐一来

浅谈jQuery操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$(‘div')将返回div里面的所有div元素包装的JQuery对象。在这种情况下,JQuery提供了几个

jQuery弹出窗口打开链接的实现代码 下面给大家分享一段jquery代码实现弹出窗口打开链接的实现方法window.open(url,name,style,replace);//弹出窗口打开链接,参数:网址,命名,窗体样式,是否替

标签: jquery data-

本文链接地址:https://www.jiuchutong.com/biancheng/373978.html 转载请保留说明!

上一篇:jQuery手指滑动轮播效果(jquery 滑块)

下一篇:详解jQuery中的DOM操作(jquery中操作dom节点的方法)

  • 买房缴纳契税需要交税吗
  • 工会经费计税依据
  • 物流公司如何办理营运证
  • 避税岛是什么
  • 财务报表与分析课后答案
  • 外资企业研发中心
  • 学校捐赠收入需上交吗
  • 购买国税金税卡年费应该怎么做账务处理?
  • 公司购买的绿植普票怎么抵扣
  • 装修公司能开增值发票吗
  • 增值税发票开户行填简称是被允许的吗?
  • 单次劳务费税率
  • 差额开票的会计分录
  • 临时工发工资要扣税吗
  • 资本公积转增实收资本所有者权益会变吗
  • 预付账款后期如何冲销
  • 收到加盟费尾款怎么做分录?
  • 小规模开3%专票可享受减免
  • 买免税产品
  • mac系统怎么更改输入法
  • 收到车辆保险发票怎么做分录
  • 应收账款贷方余额怎么在资产负债表中填列
  • 水电费无发票如何做账
  • php怎么做网页
  • linux用不了yum
  • 汇算清缴后补缴企业所得税账务处理
  • 什么是产品?产品的举例子
  • 免抵退税务处理
  • 企业购入固定资产在每期末应使用公允价值法进行计量
  • PHP:imagegrabscreen()的用法_GD库图像处理函数
  • php substr()
  • php判断密码长度
  • 如何修改php网页内容
  • 出售债券税费处理会计分录怎么写
  • 上海地铁9号线一期工程
  • php读取excel数据
  • phpcms模块
  • 所得税汇算清缴调整项目
  • 怎么解决食堂拥挤问题
  • 为什么我们要用英语交流翻译
  • 印花税漏交了有什么影响
  • 有限责任公司分类
  • 没有原始凭证可以记账吗
  • 递延所得税资产和所得税费用的关系
  • 企业汇总纳税的原则
  • 出差补贴费计入什么科目
  • 季度亏损需要计提企业所得税吗
  • 对公转账房租如何填写备注
  • 弥补亏损账务处理流程
  • 风险纳税人去税务局去报税可以吗
  • 应收账款少收会计分录
  • 物流公司的修理工资高吗
  • 企业给员工单独交社保
  • 二类银行卡是什么卡
  • 汽车费用包括哪些会计科目呢
  • sql将两个表的数据合并
  • freebsd使用
  • 软件无法卸载怎么办,安装的软件卸载不了怎么办
  • windows安装服务器
  • 开启电脑上帝模式
  • win10怎么显示磁盘已用空间
  • ubuntu apt-cdrom
  • 微软官方确认:Xbox不会出现在E3 2023实体展
  • 分形图形学
  • Cocos2d-JS中JavaScript继承
  • nodejs执行cmd命令
  • bat批处理命令大全
  • es5 教程
  • python字符串大全
  • javascript中array数组对象的含义及常用方法
  • js动态改变网页标题
  • js设计模式和开发实践
  • unity3d基础教程
  • js中alert怎么用
  • python程序解析
  • 广东增值税电子专用发票
  • 新加坡政治体制的介绍
  • 福建网上税务局app
  • 江苏发票认证平台app
  • 争议问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设