Kendo MVVM 使用远程数据源创建新记录 [英] Kendo MVVM create new record with remote datasource

问题描述

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

I think I'm missing something simple, but I can't find any examples showing how to do this... also, please forgive me if some of the terminology I'm using is wrong.

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

I simply want to use an HTML form that is bound to a Kendo Observable object to create a new record in my remote datasource.

我看过的所有示例都展示了如何编辑现有记录，但这不是我想要的(至少目前不是).

All the examples I've seen show how to edit existing records, but that's not what I'm looking for (at least not at the moment).

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

I've created a Fiddle http://jsfiddle.net/matbeard/fYfYz/2/ with a simple cut-down version of what I've got so far. Obviously it won't actually save the record as the create URL doesn't point anywhere, but I'm confident I can handle that.

有人能指出我正确的方向吗?谢谢.

Can somebody please point me in the right direction? Thanks.

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

And because I can't post a question without it, here's some code copied from the 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);

推荐答案

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

Lets do it slightly different...

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

• Your form does not need to (should) be bound to the and object containing the DataSource since you are actually not saving the dataSource but one record.

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

So, you should define the model as:

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

DataSource 现在变成了一个对象:

The DataSource now becomes an object per-se:

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

并且您的可观察对象具有 data 元素，该元素是定义的 Model 的实例(new Model()).

And your observable object has data element that is an instance of the Model defined (new Model()).

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

因此，您的表单现在应该类似于:

So, your form should be now something like:

<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/

Your JSFiddle modiefied http://jsfiddle.net/6LHx3/4/

这篇关于Kendo MVVM 使用远程数据源创建新记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！