javascript - Knockout.js - foreach ループ内の要素の再レンダリングを停止する

Question

私のviewModelには、1つ以上の「bay」オブジェクトを含む「bays」という監視可能な配列があります。各「ベイ」オブジェクトには、「製品」オブジェクトを含むことができる「製品」と呼ばれる監視可能な配列が含まれます。私のマークアップは次のようになります。

<div data-bind="foreach: bays">
    <div class="bay" data-bind="foreach: products">
        <div class="product">
        <!-- Product innards -->
        </div>
    </div>
</div>

製品オブジェクトがあるベイから別のベイに移動すると、製品要素とその内部のすべてが破棄され、再作成されたように見えます。これは、次の jfiddle で確認できます。 /

私のアプリケーションは一度に何百もの製品をベイ間で移動でき、それらすべてを再作成する必要があるため、パフォーマンスの問題が発生しています。製品要素を破棄してすべて再作成するのではなく、既存の製品 HTML を再利用する方法はありますか?