位置: 编程技术 - 正文
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属性来指定循环展开。
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中的DOM操作(jquery中操作dom节点的方法)
