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

Question

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

我只想使用绑定(bind)到 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

让我们做些不一样的...

您的表单不需要(应该)绑定(bind)到包含 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/