Question

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

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

我见过的所有例子都显示了如何编辑现有记录，但这不是我正在寻找的（至少现在不是这样）。

我创建了一个小提琴http://jsfiddle.net/matbeard/fYfYz/2/，其中包含了迄今为止我所获得的简单版本。显然它不会实际保存记录，因为创建URL不指向任何地方，但我相信我可以处理它。

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

因为没有它我就不能发一个问题，这里有一些从小提琴复制的代码：

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的对象，因为您实际上并没有保存dataSource而是一条记录。

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

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 modiefied http://jsfiddle.net/6LHx3/4/

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

1 个答案: