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地址（其中有原始碼、文件和示例程式碼）：