在 KnockoutJS 中触发 beforeRemove、afterAdd 处理程序

Question

我在触发 KnockoutJs beforeRemove 和 afterAdd 处理程序时遇到一些问题。

这是相关的代码片段

function viewModel(list) {
    var self = this;

    this.items = ko.observableArray(list);

    this.removeItem = function(item) {
        self.items.remove(item);
    }

    this.removeFirst = function() {
        self.removeItem(self.items()[0]);
    };

    this.onRemove = function(elements) {
        console.log("Updating");
        $(elements).addClass('transition-out');
    };
}

ko.applyBindings(new viewModel(items));

这个标记

<button data-bind="click: removeFirst">Remove first</button>
<ul data-bind='foreach: items, beforeRemove: onRemove'>
    <li data-bind="text: name, click: $parent.removeItem"></li>
</ul>

，我看到

列表更新，但 onRemove 处理程序从未被触发。我创建了一个 JSFiddle 来说明问题。

谢谢，

吉恩

Answer 1

您要使用的语法如下所示：

data-bind='foreach: { data: items, beforeRemove: onRemove }'

beforeRemove 是 foreach（最终是 template）绑定接受的选项。它按照您指定的方式被视为单独的绑定。如果绑定不存在，则会忽略它（某些绑定是通过 allBindingsAccessor 访问的，因此 KO 不会知道这一点，也不会抛出错误）。

此外，该函数将为“模板”中的每个节点调用一次。在您的情况下，它将是一个文本节点、li 和另一个文本节点。如果要忽略文本节点，请检查元素的（第一个参数）nodeType 是否为 1。