Two-way bindings with Kendo MVVM from remote data source - ajax

Question

I want to bind JSON that I fetch from a remote source to elements on a page. I was hoping to use the Kendo DataSource to manage the transport and use MVVM to display and update the data.
I need help as I cannot work out how to display the remote data:
http://jsfiddle.net/digory/zxoLpej9/
Here is my 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();
});
And here is the UI display code that I am trying to use to render the data:
<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

I've been playing around a bit more and think I might have found a suitable approach.
The key finding was to set the data in the view model from within the dataSource's change function:
http://jsfiddle.net/digory/yyunxgcw/
change: function() {
var view = this.view()[0];
vm.set("data", view);
},
I'm sure it can be more elegant, but it seems to be working!