Я хочу привязать 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>