jquery-dataview 数据视图插件 - 数据填充与视图更新利器

最新推荐文章于 2024-07-24 13:13:02 发布

天笑2001

最新推荐文章于 2024-07-24 13:13:02 发布

阅读量1.5k

点赞数

分类专栏：产品文章标签： jquery插件数据视图 MVVM DOM模板

本文链接：https://blog.csdn.net/skyshore/article/details/53821504

版权

产品专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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();