从远程数据源与 Kendo MVVM 进行双向绑定答案

【问题标题】：Two-way bindings with Kendo MVVM from remote data source从远程数据源与 Kendo MVVM 进行双向绑定
【发布时间】：2015-09-03 10:44:42
【问题描述】：

我想将从远程源获取的 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();
});

这是我试图用来呈现数据的 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>

【问题讨论】：

标签： ajax mvvm kendo-ui kendo-datasource kendo-mvvm

【解决方案1】：

我玩得更久了，我想我可能找到了合适的方法。

关键发现是在数据源的更改函数中设置视图模型中的数据：

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

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

我相信它可以更优雅，但它似乎正在工作！

【讨论】：