javascript - Knockout.js - 停止在 foreach 循环中重新渲染元素

Question

在我的 viewModel 上，我有一个名为“bays”的可观察数组，其中包含一个或多个“bay”对象。然后每个“bay”对象都包含一个名为“products”的可观察数组，其中可以包含“product”对象。我的标记看起来像:

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

如果产品对象从一个隔间移动到另一个隔间，那么产品元素及其内部的所有内容似乎都被破坏然后重新创建，如在这个 jfiddle 中所见:http://jsfiddle.net/mXyzs/20/

由于我的应用程序可以一次在托架之间移动数百个产品，并且必须重新创建所有产品，因此会导致性能问题。有没有什么方法可以让 knockout 重新使用现有的产品 html，因为支持它们的对象没有改变，而不是破坏产品元素并重新创建它们？

Answer 1

自 Knockout 版本 2.2.0 起，foreach 绑定(bind)将检测移动的项目并且不会为这些项目重新呈现 UI。但在您的情况下，您将项目从一个数组移动到另一个数组，因此此优化不适用(因为它仅适用于单个 foreach 绑定(bind))。

为了利用 foreach 的能力，我们可以将结构扁平化为单个数组。

var result = [];
ko.utils.arrayForEach(viewModel.bays(), function(bay) {
    ko.utils.arrayForEach(bay.products(), function(product) {
        product.bay(bay);
        result.push(product);
    });
});

如果我们对扁平化列表使用computed，我们可以在单个foreach 绑定(bind)中引用它。

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

使用这种方法，虽然产品将按 bay 排序，但所有产品 div 都是兄弟。因此，您将无法为每个 bay 分配一个 div。

示例:http://jsfiddle.net/mbest/3ZUxZ/