beforeRemoveハンドラがあるときにobservableArrayデータを置き換えると、リフレッシュの問題が発生する

Question

タイマーをリフレッシュする通知システムがあります。キューに4つのレコードがあるとします。リフレッシュが発生したときにキューを表示している場合、基になる通知配列は、4つのレコードを持つ新しい配列に置き換えられます。これは正常に表示されます。

foreachにbeforeRemoveという通知がある場合、8個のアイテムが表示されてから4個のアイテムに戻ってきます。これは配列の更新（単純な置換、removeAllと置換、空の配列への設定、一度に追加など）に関係なく発生します。これは配列から要素を削除しようとしても起こりません。

私は本当にトランジションを適用したいと思っていますが、この不具合がなくても動作させる方法を理解することができないので、これはかなりイライラです。コードサンプルと

アップデート：ここで

は、マークアップ

<table> 
<tbody data-bind="foreach: {data: notifications, beforeRemove: hideNotification}"> 
<tr> 
<td data-bind="text: $root.message($data)"></td> 
<td><a href="#" data-bind="click: $root.acknowledge.bind($root, $data)">Got It</a></td> 
</tr> 
</tbody> 
</table> 

だと、ここでのコード（それは活字体だと私はあまり括弧を使用することができますので、私はノックアウト-ES5を使用していることに注意）です。

class Model 
{ 
    private loginId: number = (the current value; details not relevant) 

    notifications: Notification[] = []; 

    constructor() 
    { 
     ko.track(this); 
    } 


    update() 
    { 
     var self = this; 
     $.get(`/api/notifications/${self.loginId.toString()}`).done((data) => 
     { 
      self.notifications.removeAll(); 
      self.notifications = data; 
     }); 
    } 

} 

var model = new Model(); 

$(function() 
{ 
    ko.applyBindings(model); 

    model.update(); 

    setInterval(model.update.bind(model), 5000); 
}); 

この肉は、updateの方法です。これは5秒ごとに呼び出され、notifications配列を現在のデータで置き換えます。上記のように、beforeRemoveというキーワードがない場合、それは完全に機能します。それが存在し、キュー内に4つの通知がある場合、表示されたテーブルは、配列がaddの前にクリアされているにもかかわらず、4行から8行にジャンプして4に戻ります。したがって、は、配列にあります。

Answer 1

私はあなたが欲しいと思っています。非同期更新（遷移なし）を行うには、「更新」ボタンをクリックします。削除する項目をクリックします（遷移あり）。

https://jsfiddle.net/xpq4vm31/3/

関連するコード：

update() 
{ 
    var self = this; 
    setTimeout(function() { 
     self.updating = true; 
     self.notifications.removeAll(); 
     self.notifications(["First", "Second", "Third");   
     self.updating = false; 
    }); 
} 

hideNotification(element, index, item) 
{ 
    if (this.updating) { 
     $(element).remove(); 
    } else { 
     $(element).fadeOut(2000, function(){$(this).remove();}); 
    } 
}