knockout.js - 在 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 )绑定(bind)。它以您指定的方式被视为单独的绑定(bind)。如果绑定(bind)不存在，则忽略它(某些绑定(bind)是通过 allBindingsAccessor 访问的，因此 KO 不会知道这一点并且不会引发错误)。

此外，该函数将为"template"中的每个节点调用一次。在您的情况下，它将是一个文本节点， li ，以及另一个文本节点。如果要忽略文本节点，请检查元素的(第一个参数)nodeType 是否为 1。