HTML表没有响应Knockout绑定

Question

我有一组父和子对象，我在表中显示。

表DOM通过Knockout连接到模型。这非常有效，只要模型发生变化，表就会发生变化。

现在，将DataTable应用于表格会给表格带来一些问题。由于某种原因，视图不再响应Knockout绑定。

您可以看到this jsFiddle

中说明的问题

点击＆＃39;清除家庭＆＃39;什么都不会发生。我期待桌子完全清除。

问题

为什么DOM不再响应我的模型更改？

Answer 1

这是因为一旦将数据表初始化为DOM，DataTables就会通过克隆来控制表，并在表周围添加许多元素来控制表并显示有关它的其他信息。因此，无论何时清除阵列，您的observableArray都会变空，但是对于淘汰更新DataTable已经无法控制了。 这就是为什么当您点击add families back时，它会被添加到视图中，然后如果您点击clear families，这些添加的行只会被删除。 DataTable已初始化以加载数据。

解决方案：您还需要以可以更新DataTable的方式修改模型。 无论何时向阵列中移除或添加新项目，您都需要re-draw dataTable。

为您初始化表格分配一个变量，并将其作为parameter传递给您的模型或全局定义。然后，只要您移除或添加行，您的模型内部也会更新dataTable。

var dt = $("#awesome-table").DataTable({"ordering": false});

 this.clearFamilies = function(){
      that.items.removeAll();
      // Update the table when All `items` array has been removed 
      dt.clear().draw();
      //Below will update the table whenever a single row is removed 
      // dt.row( rowIndexHere ).remove().draw();
 } 

要添加，您还需要在模型中重新绘制表格，如：dt.row.add( yourItemHere ).draw();

备用：如果您的表没有大数据（性能没有角色），您可以利用桌面周围的with绑定并允许它用新绑定重新渲染。 Check this out

我使用with绑定设置为null，然后将其更改为新数据。这会强制淘汰摆脱DOM并在with绑定变为non-null时自动重新应用绑定。

此jsFiddle中的详细信息 - 点击添加家庭和移除家庭以查看魔法发生：）