Kendo MVVM 使用远程数据源创建新记录

Question

我想我遗漏了一些简单的东西，但我找不到任何示例来说明如何做到这一点......另外，如果我使用的某些术语有误，请原谅我。

我只想使用绑定到 Kendo Observable 对象的 HTML 表单在我的远程数据源中创建新记录。

我看到的所有示例都展示了如何编辑现有记录，但这不是我想要的（至少目前不是）。

我创建了一个 Fiddle http://jsfiddle.net/matbeard/fYfYz/2/，其中包含我目前所拥有的简单缩减版。显然它实际上不会保存记录，因为创建 URL 没有指向任何地方，但我相信我可以处理。

有人可以指出我正确的方向吗？谢谢。

因为没有它我无法发布问题，所以这里有一些从 Fiddle 复制的代码：

var model = kendo.data.Model.define({
id: "id",
fields: {
    id: { type: 'number' },
    field1: { type: 'string' },
    field2: { type: 'string' },
    field3: { type: 'string' }
}
});

var viewModel = kendo.observable({
dataSource: new kendo.data.DataSource({
    type: 'json',
    transport: {
        create: {
            url: '/myurl/create',
            dataType: 'json',
            type: 'post'
        }
    },
    schema: {
        data: 'data',
        model: model
    }
});
});

kendo.bind($("#my-form"), viewModel);

Answer 1

让我们稍微改变一下......

• 您的表单不需要（应该）绑定到包含 DataSource 的 and 对象，因为您实际上保存的不是数据源而是一条记录。

因此，您应该将模型定义为：

var Model = kendo.data.Model.define({
    id: "id",
    fields: {
        id: { type: 'number' },
        field1: { type: 'string' },
        field2: { type: 'string' },
        field3: { type: 'string' }
    }
});

DataSource 现在本身变成了一个对象：

var dataSource = new kendo.data.DataSource({
    type: 'json',
    transport: {
        create: "/myurl"
    },
    schema: {
        model: Model
    }
});

您的可观察对象具有 data 元素，它是定义的 Model 的实例 (new Model())。

var viewModel = kendo.observable({
    data: new Model(),
    mySave: function(e){
        console.log("this", this.data);
        dataSource.add(this.data);
        e.preventDefault();
    }
});

所以，你的表单现在应该是这样的：

<form id="my-form">
    <input name="field1" data-bind="value:data.field1" type="text" />
    <input name="field2" data-bind="value:data.field2" type="text" />
    <input name="field3" data-bind="value:data.field3" type="text" />
    <button data-bind="click: mySave">Save</button>
</form>

您的 JSFiddle 已修改 http://jsfiddle.net/6LHx3/4/