项目已从淘汰赛可观察数组中移除,但未从html表中移除 [英] Item removed from Knockout observable array, but not from html table
问题描述
我有个小问题可以证明我的问题: http://plnkr.co/edit/PzBrcTX0Vnn01xWy4dk6
I have a plunk that demonstrates my issue: http://plnkr.co/edit/PzBrcTX0Vnn01xWy4dk6
这是一个具有设置"列表的表.它使用了Footable,因此可以对列表进行排序以及Footable的其他功能.
This is a table that has a list of "settings". It uses Footable so the list can be sorted and other features of Footable.
方案1:运行,按删除设置"按钮一或多行.请注意,按下按钮后,该行将被删除.这是预期的行为.
Scenario 1: run, push the remove setting button for one or more rows. Notice that the row is removed after the buttons is pushed. This is the expected behavior.
方案2:运行,单击设置列标题,并确保该列已排序,然后按删除"按钮.请注意,该行并未从视图中删除.
Scenario 2: run, click on the setting column header and ensure that the column is sorted, push the remove button. Notice that the row is not removed from the view.
如果在ApplicationSettings.js中设置了一个断点:
If you put a break point in ApplicationSettings.js:
var removeItem = function (item) {
items.remove(item);
};
您可以看到,在两种情况下,可观察的数组都按预期方式删除了项目,但是在场景2中,视图未按预期方式更新.
You can see that in both scenarios the observable array is removing the items as expected, but in scenario 2 the view is not updated as expected.
推荐答案
问题来自围绕每个<tr>
元素的空文本节点. foreach
绑定还跟踪那些文本节点.参见 https://github.com/knockout/knockout/pull/709 进行讨论关于为什么不可能仅将它们作为一般规则忽略的问题.另一方面,您的自定义绑定可以将它们删除.
The issue comes from the empty text nodes that surround each <tr>
element. The foreach
binding also tracks those text nodes. See https://github.com/knockout/knockout/pull/709 for a discussion about why it's not possible to just ignore them as a general rule. On the other hand, your custom binding can strip them out.
了解如何敲除可排序这样做(出于类似原因):
See how knockout-sortable does this (for similar reasons):
var nodes = Array.prototype.slice.call(element.childNodes, 0);
ko.utils.arrayForEach(nodes, function(node) {
if (node && node.nodeType !== 1) {
node.parentNode.removeChild(node);
}
});
您需要确保此程序在foreach
之前运行.我修改了绑定以执行此操作: http://plnkr.co/edit/hS6Gb2xLfabSj9K8l03y?p=preview
You need to make sure this is run before foreach
. I modified your binding to do that: http://plnkr.co/edit/hS6Gb2xLfabSj9K8l03y?p=preview
这篇关于项目已从淘汰赛可观察数组中移除,但未从html表中移除的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!