jquerydataview数据视图插件使用方法

 
id=
 
name=

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

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

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

 

  

   

    id=
    name=
   
  
 

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

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

 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"}
   ]}
  ]
 }

 

  
 name:  
  
 addr:  /  
  

   

    
order id=, amount=
    

     

      
item id=
      
item name=
     
    
   
  
 

 $(".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();