data-binding - ノックアウト 2 ウェイ foreach バインディング DOM の変更によるモデルの更新

Question

ページにリストがあり、ノックアウトの foreach バインディングを使用してリスト項目を表示している場合、別の何かが DOM を更新して追加のリスト項目を追加します。そのDOMの変更を検出し、そのモデルを更新して新しいアイテムをobservableArrayに追加するためにノックアウトを取得できる方法があれば?

ここに問題を示すフィドルがあります...

http://jsfiddle.net/BGdWN/1/

function MyViewModel() {
    this.items = ko.observableArray([
        { name: 'Alpha' }, { name: 'Beta' }, { name: 'Gamma' }, { name: 'Delta' }
    ]);

    this.simpleShuffle = function() {
        this.items.sort(function() {
            return Math.random() - 0.5; // Random order
        });
    };

    this.simpleAdd = function() {
         $("#top").append("<li>New item</li>");
    }
}

ko.applyBindings(new MyViewModel());

同じobservableArrayにバインドされた2つのリストがあり、addItemボタンをクリックすると、DOMが更新されてトップリストに新しいリストアイテムが含まれていることがわかりますが、2番目のリストもすべてモデルを介して更新したいと思います.

ノックアウトは、レンダリングしなかった DOM 要素を無視しているようです。これは、シャッフル ボタンをクリックすると確認できます。新しいアイテムはそこに残ります。それらを削除して、完全に再レンダリングすることを期待していました。

「アイテムをobservableArrayに追加するだけ」で答えないでください