表格 DOM 通过 Knockout 连接到模型。这工作得很好，只要模型发生变化，表格就会发生变化。
现在，将DataTable 应用到表格会带来一些问题。由于某种原因，视图不再响应 Knockout 绑定。
您可以看到this jsFiddle中说明的问题
点击“清除家庭”不会发生任何事情。我期待桌子完全清理干净。
问题
为什么 DOM 不再响应我的模型更改？
【问题讨论】：
标签： html knockout.js datatables-1.10
这是因为一旦将数据表初始化为 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，然后将其更改为新数据。当 with 绑定变为non-null 时，这会强制淘汰赛摆脱 DOM 并自动重新应用绑定。
jsFiddle 中的详细信息 - 单击“添加家庭”和“删除家庭”，看看奇迹发生了 :)
【讨论】：