Question

我想将从远程源获取的JSON绑定到页面上的元素。我希望使用Kendo DataSource来管理传输并使用MVVM来显示和更新数据。

我需要帮助，因为我无法弄清楚如何显示远程数据：

这是我的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>

Answer 1

我已经玩了一些，并认为我可能找到了合适的方法。

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

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

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

我确信它可以更优雅，但似乎有效！

与远程数据源的Kendo MVVM进行双向绑定

1 个答案: