HTML表格不响应Knockout绑定 [英] HTML table not responding to Knockout binding

问题描述

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

表DOM通过Knockout连接到模型。现在，将 DataTable 应用到表格中，可以引入一些问题到桌子上。由于某些原因，该视图不再响应Knockout绑定。

您可以在此jsFiddle

点击清除家人，什么都不会发生。我希望表格能够完全清除。

问题

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

解决方案

这是因为一旦将数据表初始化为DOM，DataTables通过克隆来控制表，并添加一些表格中的元素既控制表格又显示关于它的附加信息。所以，无论何时清除数组，实际上，您的 observableArray 都会变空，但它不再适用于敲除以更新DataTable。
这就是为什么当你点击添加家庭它会被添加到视图中，然后如果你点击清除家庭那些仅添加的行将被删除。 DataTable已经初始化用于加载数据。

解决方案：您需要修改模型以更新 DataTable 。
当你删除或添加新项目给你数组时，你还需要 re-draw dataTable。

在初始化表的地方分配一个变量，并将它作为参数传递给您的模型或全局定义它。然后，在你的模型中，当你删除或添加一行时，也会更新你的 dataTable 。

  var dt = $（＃awesome-table）。DataTable（{ordering：false}）; 
  

---

  this .clearFamilies = function（）{
 that.items.removeAll（）; 
 //当所有`items`数组被移除时更新表
 dt.clear（）。draw（）; 
 //每当删除一行时，下面都会更新表
 // dt.row（rowIndexHere）.remove（）。draw（）; 
} 
  

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

替代：如果你的表没有大数据（性能没有作用），你可以利用和绑定你的表，并允许它被重新渲染新的绑定。 检查

我用一个和绑定，并将其设置为 null ，然后将其更改为新数据。这强制淘汰掉DOM，并在绑定变为非空时自动重新绑定绑定。

详细信息在这个 jsFiddle - 点击添加家庭和删除家庭，看看发生了什么奇迹：）

I have a set of parent and child objects which I am displaying in a table.

The table DOM is wired to the model via Knockout. This works pretty well and the table changes whenever the model changes.

Now, applying DataTable to the table brings in some issues to the table. The view is no longer responding to Knockout bindings for some reason.

You can see the problem illustrated in this jsFiddle

Click on 'Clear families' nothing will happen. I was expecting the table to completely clear out.

QUESTION

Why is the DOM no longer responding to my model changes?

解决方案

It is because once you initialize data table to the DOM, DataTables takes control of the table by cloning and adds a number of elements around the table to both control the table and show additional information about it. So whenever you clear your array in fact your observableArray gets empty but it is out of control for knockout to update DataTable anymore. That's why when you click on add families back it gets added to view and then if you click on clear families those added rows only will be removed. DataTable was already initialized for loading data.

Solution: You need to modify your model in a way that can update DataTable as well. whenever you remove or add new item to you array you need to re-draw dataTable as well.

Assign a variable where you're initialing the table and either pass it as a parameter to your model or define it globally. Then inside your model whenever you remove or add a row update your dataTable as well.

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();
 } 

to add also you need to re-draw the table inside your model like :dt.row.add( yourItemHere ).draw();

Alternative: If your table does not have a large data (performance doesn't have a role) you can take advantage of with binding around your table and allow it to be re-rendered with the new bindings. Check this out

I used a with binding which is set to null and then change that to the new data. This forces knockout to get rid of the DOM and automatically reapply the bindings when the with binding becomes non-null.

Details in this jsFiddle - Click on Add families and Remove families to see the magic happen :)

这篇关于HTML表格不响应Knockout绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！