KendoUI Grid - 动态添加行 - 绑定 vm答案

【问题标题】：KendoUI Grid - dynamically added row - bind vmKendoUI Grid - 动态添加行 - 绑定 vm
【发布时间】：2018-07-11 17:22:26
【问题描述】：

我使用的是 Kendo 版本 2017.3.913，我是客户端。

我将要描述的所有内容......除了最后一点（典型！）。

我的网格设置为调用我的 api 来返回数据。当数据返回时，我为每条记录添加了一个附加属性“IsSelected”，因为我在每一行都有一个复选框。然后我将数据绑定到网格并应用我的过滤器（网格上方还有四个复选框以允许过滤数据）。

一旦我的网格被绑定，我就会连接一个绑定事件，根据数据（禁用等）设置每行上的复选框状态。这还在数据行之间添加了许多行（绿色） - 就像一个标题，表明下面的行都是相互关联的（所以想象一个绿色行后面跟着 5 个白色行，然后是一个新的绿色行并说3个白色行等）。我以这种方式添加的这些行上也有一个复选框 - 当我单击此复选框时，我希望所有相关的（白色）行都被选中（

到目前为止一切顺利。

当我过滤它时网格会刷新，所以我必须想出一种方法来跟踪被选中的复选框并在网格刷新后重新设置它们的状态。以前（即：在不同的页面上）我通过使用数组来存储已选中的复选框，然后在绑定事件上我将遍历数组并重新检查相应的复选框来管理这个 - 结果是相当的在几个地方有很多代码。所以这次我想我会尝试使用 Observable Array (VM)。

我让一切工作都达到了一定程度——数据行（白色）在网格刷新之间保持其复选框状态，这很棒——不需要大量的 DOM 工作。不过……

添加标题行（绿色）的代码如下所示；

chkbx.setAttribute("data-bind", "events: { change: CheckBoxClick }");

当然，该方法中的代码要多得多，但这是重要的一点（我相信）。这正确呈现为；

<td>
    <input type="checkbox" data-id="196" data-bind="events: { change: CheckBoxClick }">
</td>

我的虚拟机中有一个方法；

CheckBoxClick: function() {
    alert("Hello");
}

但它永远不会被调用，所以我认为由于添加了新的与 VM 相关的东西，VM 需要反弹，但 VM 不知道，所以我像这样在网格的绑定事件上重新绑定 VM；

kendo.bind($("#openTab"), openVM);

不幸的是，该行导致网格绑定事件中完成的所有工作都被破坏，即：没有标题行（绿色）和（虽然我还没有提到）背景行颜色（在数据行上) 被消灭。基本上我只剩下一个简单的网格。动态添加的行（绿色）不存在，以便能够单击它们的复选框以点击 VM 中的方法。

我不知道为什么绑定虚拟机应该以这种方式改变网格。

有人有什么想法吗？

【问题讨论】：

标签： jquery checkbox kendo-ui kendo-grid

【解决方案1】：

当您在已绑定的 DOM 元素中动态添加内容时，新内容不会像您所观察到的那样被绑定。您需要做的只是绑定您添加的新内容。在包含整个网格的元素上再次调用 kendo bind 是矫枉过正的，并且会导致您所描述的不良影响。一般来说，如果你想重新绑定一个 DOM 元素，你应该先使用 kendo.unbind ，但我离题了。

无论如何，我希望你需要做的就是：

chkbx.setAttribute("data-bind", "events: { change: CheckBoxClick }");
kendo.unbind(chkbx); // Might need to do this, not sure
kendo.bind(chkbx, openVM);

【讨论】：