Question

我有一个简单的网页，其中包含大量产品（20,000+）。当您可以单击某个产品时，它将加载（通过AJAX）一个颜色列表并以内联方式显示它们。 HTML ...

<div data-bind="foreach: products">
    <span data-bind="click: $root.loadColors($data), text: $name"></span>
    <ul data-bind="foreach: colors">
         <li data-bind="text:$data" />
    </ul
</div>

商店视图模型：

function shopViewModel()
{
    var self = this;
    self.products = ko.observableArray([]);

    self.loadColors = function(product)
    {
        var data = GetColorsByAjax();
        product.colors(data);
    }
}

产品视图型号：

function productModel(data)
{
    var self = this;
    self.name = data.name;
    self.colors = ko.observableArray([]);
}

当我有20,000多种产品时，它会占用大量内存。每个产品都有一个 colors 数组，它始终为空/空，直到用户点击它，但它仍然占用大量内存。

理想情况下，我想删除颜色 observableArray，并在用户点击产品时以某种方式动态创建它。或者将其分成新的viewModel。

我想消除空的observableArrays以最小化内存，但无法弄清楚它是如何做到的。

Answer 1

我会使用Knockout的一个控制流绑定（if，with）来仅绑定颜色：fore colors上实际存在productModel()属性。

HTML：

<div data-bind="foreach: products">
    <span data-bind="click: $root.loadColors($data), text: $name"></span>
    <div data-bind="if: hasColors">
        <ul data-bind="foreach: colors">
           <li data-bind="text:$data" />
        </ul>
    </div>
</div>

产品视图模型：

function productModel(data)
{
    var self = this;
    self.name = data.name;
    self.hasColors = ko.observable(false);
    self.colors = null;
}

商店视图模型

function shopViewModel()
{
    var self = this;
    self.products = ko.observableArray([]);

    self.loadColors = function(product)
    {
        var data = GetColorsByAjax();
        if(product.colors == null) {
            product.colors = ko.observableArray(data);
            product.hasColors(true);
        } else {
            product.colors(data);
        }
    }
}

Answer 2

您不必存储空的可观察数组：您可以默认为undefined，Knockout会将其视为foreach绑定中的空数组。

以下是演示：http://jsfiddle.net/zm62T/

最小化knockout中空observableArrays的内存使用量

2 个答案: