尽可能减少空的observableArray在内存中的使用率

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的产品，它使用了大量的内存。每个产品都有一个颜色的数组，它总是为空/空，直到用户点击它，但仍使用大量内存。

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

我想消除空的observableArrays以尽量减少内存，但无法弄清楚它是如何做到的。

Answer 1

我会使用Knockout的控制流绑定（如果有）绑定的颜色之一：foreach productModel()上实际上有colors属性。

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/