Kendo ui 使用剑道UI网格实现双向绑定的预期方式是什么？

以下是我试图通过剑道UI网格实现的场景：

通过jquery、Restanglar或其他方式检索一些持久化数据

将网格绑定到数据

编辑网格中的数据

向网格中添加新行

单击一些“保存”按钮并将更新的数据发送回服务器

根据我读到的内容，在使用剑道UI网格时，必须包装为数据源提供的数组，以便网格更新原始模型。但是，网格的内置命令在执行此操作时似乎无法正常运行。如以下示例所示，单击行上的“编辑”后，您不能再单击“更新”或“取消”。它只是卡住了。如果不使用数组对其进行包装，现有记录会得到很好的更新，但不会将新记录添加到原始数组中

错误行为似乎与这样一个事实有关，即通过使用ObservableArray将uid包装在记录上。奇怪的是，传入一个空数组（就像您在Add-vs和Edit对话框中所做的那样），按钮工作正常，底层数据源也被修改了

那么，这种配置有什么问题

更新

---

最初的示例将id字段显示为其中一列，事实证明这会分散我收到反馈的几个人对真实问题的注意力，因此我将其删除。我还添加了添加新行和添加输出的功能，以查看原始数据源的内容。

如果您取消包装ObservalArray并使用普通数组，它似乎可以工作

  var sourceData = [
    { id:1, text: "Foo" },
    { id:2, text: "Bar" },
    { id:3, text: "Baz" }
  ];

我已经有一段时间没有深入研究剑道的内部结构了，但是如果我没记错的话，当你将一个数组传递给

新的数据源

时，它会自动将数组包装成可观察的对象

如果使用上面显示的普通数组，然后编辑表中的字段，则可以通过

window.sourceData[0]。text

---

---

补充说明；由于将数据源的

id

设置为

id

属性，因此如果在表中编辑该列，会发生奇怪的事情。ID应该是不可变的。例如，如果您编辑id=1的第一行，并将id更改为

3

，那么剑道数据源将获取id=3的项目（第三行），并将文本从“Baz”更改为“Foo”。换句话说，Kendo通过查找其ID而不是跟踪数组中的索引来查找要更改的项。

如果您取消包装ObservalArray并改用普通数组，它似乎可以工作

  var sourceData = [
    { id:1, text: "Foo" },
    { id:2, text: "Bar" },
    { id:3, text: "Baz" }
  ];

我已经有一段时间没有深入研究剑道的内部结构了，但是如果我没记错的话，当你将一个数组传递给

新的数据源

时，它会自动将数组包装成可观察的对象

如果使用上面显示的普通数组，然后编辑表中的字段，则可以通过

window.sourceData[0]。text

---

---

补充说明；由于将数据源的

id

设置为

id

属性，因此如果在表中编辑该列，会发生奇怪的事情。ID应该是不可变的。例如，如果您编辑id=1的第一行，并将id更改为

3

，那么剑道数据源将获取id=3的项目（第三行），并将文本从“Baz”更改为“Foo”。换句话说，Kendo通过查找其ID而不是跟踪数组中的索引来查找要更改的项。

我更新了我的示例，以更全面地演示我看到的问题。如果不将源数组包装在ObservableArray中，则初始记录可以正常工作，但不会添加新记录。就剑道为您包装阵列而言，这很可能是真的，但无论它如何包装，原始数据源都不会在阵列中包含新项。关于身份证，我删除了这个专栏，因为事实证明这会分散人们对真实问题的注意力。啊，很有趣。对我来说，当我使用ObservableArray时，新建和编辑/保存工作很好，但编辑/取消会导致问题。。。有时。。。有时，如果先编辑/保存一条记录，然后再编辑/取消，则会再次生效。似乎前后矛盾。我怀疑这可能只是一个bug，您应该发送给Telerik。我已经更新了我的示例，以更全面地演示我看到的问题。如果不将源数组包装在ObservableArray中，则初始记录可以正常工作，但不会添加新记录。就剑道为您包装阵列而言，这很可能是真的，但无论它如何包装，原始数据源都不会在阵列中包含新项。关于身份证，我删除了这个专栏，因为事实证明这会分散人们对真实问题的注意力。啊，很有趣。对我来说，当我使用ObservableArray时，新建和编辑/保存工作很好，但编辑/取消会导致问题。。。有时。。。有时，如果先编辑/保存一条记录，然后再编辑/取消，则会再次生效。似乎前后矛盾。我怀疑这可能只是你应该发送给Telerik的一个bug。目前，我不确定我的使用场景是否不是预期的方式，但看起来可能是剑道UI网格的bug导致了所描述的行为。目前，我的工作是通过调用vm.grid.dataSource.data（）在保存数据时从网格中检索数据；感谢我的同事提供了解决方法。目前，我不确定我的使用场景是否不是预期的方式，但似乎Kendo UI网格中存在导致所述行为的错误。目前，我的工作是通过调用vm.grid.dataSource.data（）在保存数据时从网格中检索数据；感谢我的同事提供了解决办法。