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

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属性：根据该属性的值计算是否创建或显示该结点。