<div> <p> name: <span></span> </p> <p> addr: <span></span> / <span></span> </p> <ul> <li dv-for="orders"> <p>order id=<span></span>, amount=<span></span></p> <ul> <li dv-for="items"> <p>item id=<span></span></p> <p>item name=<span></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地址（其中有源码、文档和示例代码）：