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

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

person Darren Neimke    schedule 03.09.2015    source источник


Ответы (1)


Я немного поигрался и думаю, что, возможно, нашел подходящий подход.

Ключевой вывод состоял в том, чтобы установить данные в модели представления из функции изменения dataSource:

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

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

Я уверен, что он может быть более элегантным, но вроде работает!

person Darren Neimke    schedule 03.09.2015