位置: 编程技术 - 正文

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节点的方法)

  • 个人所得税本期收入是扣完保险吗
  • 未核销fyc
  • 税负率的计算公式举例说明
  • 出口货物退税的基本原则
  • 商品开票是什么意思
  • 开办期间的利息收入怎么做账
  • 城镇土地使用税的计税依据
  • 企业为个人承担的个人部分社保
  • 支付境外培训费
  • 个人向个人借款100万交税吗
  • 其他综合收益科目性质
  • 分公司企业所得税汇总缴纳还是单独缴纳
  • 销售收入的暂估入账是否结转利润
  • 个人独资企业处罚听证的标准
  • 增值税专用发票几个点
  • 房地产形象海报
  • 软件研发购买的测试用的设备应该怎么做账?
  • 收到借款利息怎么做会计分录
  • 报税没有申报现金流量表
  • 印刷制作费税收编码是啥
  • 专用发票的有效期是几年
  • 抵税必须要有发票
  • 未取得发票怎么做纳税调增操作
  • 收到运费怎么做账
  • 生产成本中材料款年末要全部结转吗
  • 购买原材料暂估入账的会计分录
  • 报表总收入
  • 收到工伤保险怎么做分录
  • 电脑输入法切换键怎么设置
  • 一个产品要有什么认证
  • 公司财务账目不符怎么办
  • 微软告诉你
  • 公司和个人分别交税一部分吗
  • rtmservice.exe - rtmservice是什么进程 有什么用
  • 下载文件是php
  • 购进旧设备折旧年限如何计算
  • 股权投资的收益回收方式
  • 固定资产盘盈为什么要调整所得税
  • 实收资本增加印花税申报流程
  • 增值税折扣发票有折扣字样
  • 给员工期权和给股票的区别
  • 其他综合收益转入盈余公积和未分配利润
  • 结转销售成本的凭证需要附件吗
  • 季度报税有利润必须要报交所得税吗
  • 工会经费和残保金不交有什么影响
  • 公司垫付的工伤医药费怎么报销
  • mongodb数据库中间创建自己名字首字母的数据库
  • sql server ceiling
  • python怎么用
  • 其他应付款包括应付股利和应付利息吗
  • 长期股权投资的核算方法
  • 财政拨入的专项款专账怎么做
  • 企业存货核算范围
  • 可供出售金融资产公允价值变动
  • 换货与退货
  • 建安业一般纳税人税率是多少
  • 机关单位工会经费提取比例
  • 结转库存商品需要附件吗
  • 没实收资本还怎么做账
  • 管理费用如何做分录
  • 工会经费支出范围
  • 进项票取得晚了怎么抵扣
  • 新成立的公司工会经费需要交吗
  • 固定资产会计核算方法
  • win8.0下载
  • mac book视频
  • 安装centos图形界面
  • linux服务器日志文件在哪里
  • unity3d ide
  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
  • jquery的实现原理
  • node.js创建服务
  • css怎么画图
  • linux的sed -i
  • flow 开发
  • jquery判断对象是否存在
  • javascript引用值
  • 车船税申报表样本
  • 实地税务稽查需注意什么
  • 收购晾晒烟叶,支付价款20万元,支付价外补贴2万元
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设