Запуск beforeRemove, afterAdd обработчики в KnockoutJS

У меня возникают проблемы с тем, как запускать обработчики 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, чтобы проиллюстрировать проблему.

Спасибо,

Gene

Ответ 1

Синтаксис, который вы хотите использовать, выглядит так:

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

beforeRemove - это опция, принятая привязкой foreach (и в конечном итоге template). Это рассматривалось как отдельное обязательство в том виде, в котором вы его указывали. Если привязка не существует, то она игнорируется (к некоторым связям обращаются через allBindingsAccessor, поэтому KO не знает этого и не выдает ошибку).

Кроме того, функция будет вызываться один раз для каждого node в вашем "шаблоне". В вашем случае это будет текст node, li и еще один текст node. Если вы хотите игнорировать текстовые узлы, тогда проверьте, что элемент (первый аргумент) nodeType равен 1.