Kendo MVVM - 简单值绑定到数据源答案

【问题标题】：Kendo MVVM - Simple Value Binding to a DataSourceKendo MVVM - 简单值绑定到数据源
【发布时间】：2014-07-15 19:20:36
【问题描述】：

我想学习如何在 Kendo MVVM 中将页面上的输入绑定到数据源。简单来说，假设我有以下 html：

<div id="configDiv">
    Call:<input data-bind="value: SystemCall" type="text" /><br />
    <button data-bind="click: save">Save</button>
</div>

以及以下视图模型：

var self = this;

    var Model = kendo.data.Model.define({
        id: "SystemId",
        fields: {
            SystemCall: { editable: true }
        }
    });

        self.ViewModel = kendo.observable({
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: "/api/ServiceApi?method=Ref/SystemConfig/",
                    type: "GET"
                },
                schema: {
                    model: Model
                }
            }),
            save: function (e) {
                alert("save config");
            },
        });
        kendo.bind($("#configDiv"), self.ViewModel);

想法是从读取的 url 以 json 格式返回的 SystemCall 的值将绑定到 html 中的输入字段。出了点问题因为这行不通。我在网上搜索了一个简单的例子来做比这更复杂的事情，但找不到。关于如何开始的任何帮助都是非常感谢。

【问题讨论】：

标签： mvvm kendo-ui kendo-dataviz kendo-mvvm

【解决方案1】：

我没有完整的工作示例要分享，但我可以指出几件事。

Kendo 数据源希望您的服务器返回一组项目，因此如果您的服务器返回单个对象，例如 JSON：

{
    "SystemId": 1,
    "SystemCall": "one"
}

那么它将不知道如何处理它，因为它不是一个数组。它期望类似：

[
    {
        "SystemId": 1,
        "SystemCall": "one"
    },
    {
        "SystemId": 2,
        "SystemCall": "two"
    }
]

您的 MVVM 绑定不起作用，因为您将其绑定到“SystemCall”，但您的 ViewModel 对象没有名为“SystemCall”的属性。 THose 将在 ViewModel.dataSource 中的其中一项内

由于 DataSource 期望包含一个数据项数组，它通常绑定到 ListView 或 Grid 小部件以显示每个数据项。 ListView 中的每个行模板都可以具有该系统的输入元素。

在您的Model 中，id 字段应包含在fields 列表中，如下所示：

var Model = kendo.data.Model.define({
    id: "SystemId",
    fields: {
        SystemId: { type: "number" }, // assuming this is a number.
        SystemCall: { editable: true }
    }
});

我知道这不是一个完整的答案，但我希望这至少能让你朝着正确的方向前进......

【讨论】：

确实很有帮助。谢谢。