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


Posted in Javascript onDecember 23, 2016

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

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

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

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

下面介绍几个入门例子。

为DOM对象填充数据

例:对一个DOM赋值

HTML:

<div class="customer">
 <p>id=<span name="id"></span></p>
 <p>name=<span name="name"></span></p>
</div>

JS填充数据:

var customer = { id: 1001, name: "SAP AG" };
$(".customer").dataview(customer);

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

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

customer.name = "SAP China";
$(".customer").dataview();

获取DOM绑定的数据:

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

为模板填充数据

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

HTML: 客户列表

<div id="divCustomers"></div>

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

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

var customers = [
  { id: 1001, name: "SAP AG" },
  { id: 2001, name: "Oracle CO" }
 ];
 var jtplCustomer = $($("#tplCustomer").html());
 var jparent = $("#divCustomers");
 $.each(customers, function (i, customer) {
  jtplCustomer.clone()
   .dataview(customer)
   .appendTo(jparent);
 });

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

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

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

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

HTML:

<div id="divCustomers">
  <div dv-for="customers" dv-if="id>=1000" class="customer">
   <li>
    <span dv-show="id<=2000">id=<span name="id"></span></span>
    name=<span name="name"></span>
   </li>
  </div>
 </div>

JS:

var data = {
  customers: [
   { id: 1, name: "Olive CO" },
   { id: 1001, name: "SAP AG" },
   { id: 2001, name: "Oracle CO" }
  ]
 };
 $("#divCustomers").dataview(data);

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

指定事件

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

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

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

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

var events = {
  liOrder_click: function (ev) {
   var order = ev.data; // 等同于 $(this).dataview('getData');
   // ...
  }
 };
jo.dataview(data, {events: events});

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

多层嵌套的数据

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

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

var customer = {
  id: 1001, 
  name: "SAP AG",
  addr: {country: "CN", city: "Shanghai"},
  orders: [
   {id: 1, amount: 9000, items: [
    {id: 101, name: "item 101"},
    {id: 102, name: "item 102"}
   ]},
   {id: 2, amount: 11000, items: [
    {id: 201, name: "item 201"}
   ]}
  ]
 }

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

<div class="customer">
  <p> name: <span name="name"></span> </p>
  <p> addr: <span name="addr.country"></span> / <span name="addr.city"></span> </p>
  <ul>
   <li dv-for="orders" class="order">
    <p>order id=<span name="id"></span>, amount=<span name="amount"></span></p>
    <ul>
     <li dv-for="items" class="item">
      <p>item id=<span name="id"></span></p>
      <p>item name=<span name="name"></span></p>
     </li>
    </ul>
   </li>
  </ul>
 </div>

JS:

$(".customer").dataview(customer);

 // 更新一些数据
 ++ 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属性可以取到上次对象。
实际使用时,常会把这些特性同计算属性、事件绑定结合起来,你会发现它会让取数据和更新视图的代码简单、灵活、易懂。

结语

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

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

https://github.com/skyshore2001/jquery-dataview

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
React如何避免重渲染
Apr 10 Javascript
JavaScript常用工具函数大全
May 06 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 #Javascript
Bootstrap源码解读按钮(5)
Dec 23 #Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 #Javascript
Bootstrap CSS使用方法
Dec 23 #Javascript
Bootstrap源码解读导航(6)
Dec 23 #Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 #Javascript
You might like
php全局变量和类配合使用深刻理解
2013/06/05 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
Vue formData实现图片上传
2019/08/20 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
Python的两道面试题
2013/06/29 面试题
村委会主任先进事迹
2014/01/15 职场文书
社区先进事迹材料
2014/05/19 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python