Двусторонние привязки с Kendo MVVM от удаленного источника данных

Question

Я хочу связать JSON, который я извлекаю из удаленного источника в элементы на странице. Я надеялся использовать Kendo DataSource для управления транспортом и использования MVVM для отображения и обновления данных.

мне нужна помощь, я не могу работать, как для отображения удаленных данных:

http://jsfiddle.net/digory/zxoLpej9/

Вот мои 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(); 
}); 

А вот код отображения пользовательского интерфейса, что я пытаясь использовать для визуализации данных:

<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> 

Answer 1

Я играл в aroun d немного больше и думаю, что я мог бы найти подходящий подход.

Основной вывод был для установки данных в модели представления из функции изменения источника данных в:

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

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

Я уверен, что это может быть более элегантным, но это, кажется, за работой!