0

我正在尝试使用列表视图将数据添加到本地 json 变量中。我已经将我的数据数组封装在一个 kendo 数据源中，这是我的视图模型的一部分。

问题是，当到达传输中的“创建”操作时，我的本地数组还没有更新，但我的 viewmodel.dataSource.data 实际上是。当达到传输中的创建操作时，如何更新我的本地数据数组。

这是我的代码的Jsfiddle。

    var data =
        [{
            "ID": 3,
            "TopMenuId": 2,
            "Title": "Cashier",
            "Link": "www.fake123.com"
        },
        {
            "ID": 4,
            "TopMenuId": 2,
            "Title": "Deposit",
            "Link": "www.fake123.com"
        }
        ];

    var viewModel = kendo.observable({
        dataSource: new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    alert("Read");
                    options.success(data);
                },
                create: function (options) {
                    debugger;

                    alert("Create");
                    alert(data.length);
                },
                update: function (options) {
                    alert("Update");
                },
                destroy: function (options) {
                    alert("Destroy");
                    alert(data.length);
                }
            },
            batch: true,
            pageSize: 4,
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: {
                            editable: false,
                            nullable: true
                        },
                        TopMenuId: {
                            editable: false,
                            nullable: true
                        },
                        Title: {
                            editable: true,
                            validation: {
                                required: true
                            }
                        },
                        Link: {
                            editable: true
                        }
                    }
                },
                data: "",
                total: function (result) {
                    result = result.data || result;
                    return result.length || 0;
                }
            },
        }),
    });

    //kendo.init($("#briefOverview"));
    $(document).ready(function () {

        kendo.bind($("#briefOverview"), viewModel);
        $(".k-add-button").click(function (e) {
            var listView = $("#listsContainer").data("kendoListView");
            listView.add();
            e.preventDefault();
        });
    });
4

1 回答 1

0

调用传输中的create方法来实际更新您的数据源，无论它是本地的还是远程的，您都应该这样做。

因此，在您的情况下，一些考虑因素是：

  1. 您需要更新本地数据源（附加元素）。
  2. 您需要分配一个id（您应该在create完成时id具有一个非默认值（在您的情况下是一个不同于 null 的值）。
  3. options.success最后，在您的案例（本地）中，您应该使用从服务器返回的元素（通常使用分配的）调用与id您收到的相同但已ID填充的内容。

所以你的create方法应该是：

create: function (options) {
    debugger;
    var item = options.data.models[0];
    // assign an ID, here I pick a Kendo generated UID
    item.ID = kendo.guid();
    data.push(item);
    alert("Create with ID: " + item.ID);
    alert(data.length);
    options.success(item);
},

并且您的 JSFiddle 在这里修改：http: //jsfiddle.net/3ADTM/1/

顺便说一句，您还应该调用options.successon update：

update: function (options) {
    alert("Update");
    options.success(options.data.models[0]);
},

你在这里的最终 JSFiddle：http: //jsfiddle.net/3ADTM/2/

于 2013-11-09T23:19:49.597 回答