從遠程數據源與Kendo MVVM的雙向綁定

我想將從遠程源獲取的JSON綁定到頁面上的元素。我希望使用Kendo DataSource來管理傳輸並使用MVVM來顯示和更新數據。從遠程數據源與Kendo MVVM的雙向綁定

我需要幫助，我不知道如何來顯示遠程數據：

這裏是我的JS：

$(function(){ 
    var dataSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       //using jsfiddle echo service to simulate JSON endpoint 
       url: "/echo/json/", 
       dataType: "json", 
       type: "POST", 
       data: { 
        json: JSON.stringify({ 
         "ItemA": "A", 
         "ItemB": "B" 
        }) 
       } 
      } 
     }, 
     schema: { 
      model: { 
       fields: { 
        ItemA: { type: "string" }, 
        ItemB: { type: "string" } 
       } 
      }    
     } 
    }); 


    var vm = kendo.observable({ 
     source: dataSource, 
     foo: 42, 
     change: function(e) { 
      console.log("Changed!"); 
     }, 
     save: function() { 
      console.log("Saved!"); 
     } 
    }); 

    kendo.bind($("#my-container"), vm); 
    vm.source.read(); 
});

這裏是我的UI顯示代碼試圖用來渲染數據：

<div id="my-container"> 
    <div> 
     <label for="ItemA">Item A</span> 
     <input id="ItemA" data-bind="value: source.data.ItemA, events: { change: change }" /> 
    </div> 
    <div> 
     <label for="ItemB">Item B</span> 
     <input id="ItemB" data-bind="value: source.data.ItemB, events: { change: change }" /> 
    </div> 
    <div> 
     <label for="Foo">Foo</span> 
     <input id="Foo" data-bind="value: foo, events: { change: change }" /> 
    </div> 
    <div> 
     <button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Save</button> 
    </div> 
</div>

來源

2015-09-03 Darren Neimke

我一直在玩aroun多一點，並認爲我可能找到了一個合適的方法。

重要的發現是，從數據源的變化函數內設置視圖模型中的數據：

http://jsfiddle.net/digory/yyunxgcw/

change: function() { 
     var view = this.view()[0]; 
     vm.set("data", view); 
    },

我敢肯定，它可以更優雅，但它似乎是加工！

來源

2015-09-03 12:31:17

從遠程數據源與Kendo MVVM的雙向綁定

回答

相關問題