jquery - knockout 无法让过渡发挥作用

Question

我已经与 Knockout 合作几天了。事情进展得相对顺利，但我遇到了一个问题。我似乎无法在这里运行动画过渡。理想情况下，我希望能够淡出销毁事件中的单个元素。我还希望能够在页面转换时为整个表格设置动画。我无法让任何东西工作，因为该元素总是“未定义”。

这是我的 foreach 绑定(bind):

<tbody data-bind='foreach: { data : $root.displayResults(startValue(), endValue()), beforeRemove: hideElement }'>

但是当调用该函数时，我收到未定义的 jQuery 错误

self.hideElement = function(elem) {
    $(elem).hide(300)
}

看看this fiddle让我知道你们的想法。

Answer 1

您应该知道 KO 将根据您的模板多次调用 beforeRemove 回调:在您的情况下，它将是一个文本节点、tr 和另一个文本节点。

因此，您需要过滤掉文本节点，仅在 elem.nodeType == 1 时隐藏，这意味着节点类型是元素:

self.hideElement = function(elem) {
    if (elem.nodeType === 1) 
       $(elem).hide(300)
}

这是一个JSFiddle通过有效的删除功能，我还添加了一些日志记录来查看 beforeRemove 被调用的次数。

Animated transitions example也是如此的 hidePlanetElement 方法。