beforeRemove、after KnockoutJSのハンドラを追加する

Question

KnockoutJs beforeRemoveとAfterハンドラを追加するにはいくつかの問題があります。

これは、関連するコードフラグメント

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はそれを認識せず、エラーをスローしません）。

また、関数は "テンプレート"内のノードごとに1回呼び出されます。あなたの場合は、テキストノード、li、および別のテキストノードになります。テキストノードを無視する場合は、要素の（最初の引数）nodeTypeが1であることを確認してください。