频道导航

jquery dataview数据视图插件使用方法

2019-01-06 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jquery dataview数据视图插件使用方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

下面介绍几个入门例子。@H_404_1@

为DOM对象填充数据

@H_404_1@

例：对一个DOM赋值@H_404_1@

HTML:@H_404_1@

id=@H_404_1@

name=@H_404_1@

JS填充数据:@H_404_1@

它会递归遍历所有带name属性的结点，如会用customer.id为其赋值。@H_404_1@

JS修改数据后，可无参数调用dataview来刷新显示：@H_404_1@

获取DOM绑定的数据：@H_404_1@

404_1@

为模板填充数据@H_404_1@

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

HTML: 客户列表@H_404_1@

<style type="text/template" id="tplCustomer">
<div class="customer">

id=@H_404_1@

name=@H_404_1@

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

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

@H_404_1@

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

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

例：使用dv-for,dv-if,dv-show等标签：@H_404_1@

HTML:@H_404_1@

name=

JS:@H_404_1@

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

指定事件

@H_404_1@

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

@H_404_1@

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

用到的函数必须通过events选项定义：@H_404_1@

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

多层嵌套的数据

@H_404_1@

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

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

HTML数据视图，展示客户、订单、物料三层数据：@H_404_1@

name: @H_404_1@

addr: / @H_404_1@

order id=
,amount=
@H_404_1@
- item id=@H_404_1@
  item name=@H_404_1@

JS:@H_404_1@

// 更新一些数据
++ customer.orders[0].amount;
customer.orders[0].items[0].name += " - updated";

// 视图局部更新：只更新一个item
var jitem = $(".customer .order:first .item:first");
jitem.dataview();

// 取DOM绑定的item数据
var itemData = jitem.dataview('getData');
// 通过 $parent 取上层数据
var orderData = itemData.$parent;
var data = orderData.$parent;

// 视图局部更新：只更新一个order:
$(".customer .order:first").dataview();

// 全部更新
$(".customer").dataview();

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

结语

@H_404_1@

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

附github地址（其中有源码、文档和示例代码）：@H_404_1@

nofollow" target="_blank" href="https://github.com/skyshore2001/jquery-dataview">https://github.com/skyshore2001/jquery-dataview@H_404_1@

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。@H_404_1@ 原文链接：https://www.f2er.com/jquery/43231.html

dataview dataview jquery 数据视图插件

上一篇：jquery自定义插件结合baiduTemplat 下一篇：详解jQuery中的DOM操作

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法

jQuery插件的种类 1、封装对象方法这种插件是将对象方法封装起来，用于对通过选择器获取的...

作者：前端之家时间：2020-12-28

jQuery插件开发入门

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。入门编写一个jQuery...

作者：前端之家时间：2020-12-28

jquery.roundabout.js实现3D图片层叠旋转木马切换

最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。兼容...

作者：前端之家时间：2020-12-28

jQuery效果之jQuery实现图片的依次加载图片

css代码： js代码：

作者：前端之家时间：2020-12-28

jQuery之deferred对象详解

一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...

作者：前端之家时间：2020-12-28

jQuery插件开发进阶

jQuery插件开发模式软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...

作者：前端之家时间：2020-12-28

jQuery 实现邮箱输入自动提示功能：（一）

记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...

作者：前端之家时间：2020-12-28

jQuery插件之上传文件ajaxfileupload.js源码与使用

在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...

作者：前端之家时间：2020-12-28

jQuery效果之封装一个文章图片弹出放大效果

首先先搭写一个基本的格式：然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...

作者：前端之家时间：2020-12-28

《从零开始学习jQuery》：用jQuery操作元素的属性与样式

元素属性和Dom属性简介对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...

作者：前端之家时间：2020-12-28

最新文章