更新绑定到本地数据的 Kendo 网格中的基础对象答案

【问题标题】：Updating base object in Kendo grid bound to local data更新绑定到本地数据的 Kendo 网格中的基础对象
【发布时间】：2014-02-10 01:38:18
【问题描述】：

我有一个本地 javascript 列表，我使用 DataSource 绑定到了 Kendo 网格（内联编辑）。当我使用网格添加一行时，视觉上一切正常，但我不知道如何更新基本的 javascript 列表。我需要这个功能，因为列表实际上是在多个位置更新的更大 Javascript 对象的一部分。完成所有更改后，整个对象将通过 ajax 发送到服务器。

这里有一些演示问题的简单代码（也可以在JSBin 上找到）。只需添加一个项目，然后单击 Get Array Size 即可看到该数组的大小没有增加。

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="MyGrid"></div>
    <a id="LengthButton">Get Array Size</a>

    <script>
        $("#LengthButton").kendoButton({
            click: function (e) {
                alert(dataList.length);
            }
        });

        var dataList = [
            { id: 1, Comment: "Comment 1" },
            { id: 2, Comment: "Comment 2" },
            { id: 3, Comment: "Comment 3" }
        ];

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    options.success(dataList);
                },
                create: function (options) {
                    var data = options.data;
                    data.id = dataSource.data()[dataSource.data().length - 1].id + 1;

                    options.success([data]);
                }
            },
            data: dataList,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number", editable: false, nullable: true },
                        Comment: { type: "string" }
                    }
                }
            }
        });

        $("#MyGrid").kendoGrid({
            toolbar: ["create"],
            columns: [
              { command: "edit" },
              {
                  title: "Comment",
                  field: "Comment"
              }
            ],
            editable: { mode: "inline" },
            dataSource: dataSource
        });
    </script>
</body>
</html>

我与 Telerik 来来回回，但仍未解决，所以我希望这里的人能指出我正确的方向。

提前致谢，杰森

【问题讨论】：

标签： javascript data-binding kendo-ui telerik

【解决方案1】：

您从dataList 创建数据源这一事实并不意味着当您更新dataSource 时会更新dataList，这只是DataSource 的初始内容。您可能应该使用dataSource 或在创建或更新记录后将dataSource 的内容复制到dataList。

您可以将按钮处理程序更改为：

$("#LengthButton").kendoButton({
    click: function (e) {
        alert(dataSource.data().length);
    }
});

如果您想将 DataSource 的内容复制回dataList，那么您可以这样做：

transport: {
    read: function(options) {
        options.success(dataList);
    },
    create: function(options) {
        var data = options.data;
        data.id = -dataSource.data()[dataSource.data().length - 1].id + 1;    
        options.success([data]);
        // Copy data back to dataList
        dataList = dataSource.data().slice();
    },
    update: function (options) {
        var data = options.data;
        options.success([data]);
        // Copy data back to dataList
        dataList = dataSource.data().slice();
    }

【讨论】：

啊，我以为我实际上已经尝试过了，但它似乎有效。谢谢！如果只是复制，他们真的不应该在所有文档和示例中将其称为绑定到本地数据，但这只是我的意见。
嗨，如果我在本地存储了一个单独的 Json 文件，我该如何更新、插入？我可以使用传输读取来获取日期，但是如何更新？