剑道MVVM -简单值绑定到数据源

Question

我想学习如何将页面上的输入绑定到数据源，在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);

这个想法是，SystemCall的值返回json格式从读取url将被绑定到html的输入字段。有点不对劲因为这行不通。我在网上找了一个简单的例子，没有比这更复杂的，但找不到。任何关于如何开始的帮助大大赞赏。

Answer 1

我没有一个完整的工作示例来分享，但我可以指出一些事情。

---

Kendo datasource期望您的服务器返回一个项目数组，所以如果您的服务器返回单个对象，例如JSON:

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

则不知道如何处理它，因为它不是数组。它期望的是:

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

---

你的MVVM绑定不会工作，因为你绑定到"SystemCall"，但你的ViewModel对象没有一个名为"SystemCall"的属性。它们应该在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 }
    }
});

---

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