0

I have a simple webpage with a large list of products (20,000+). When you can click on a product, it will load (via AJAX) a list of colors and display them inline. 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>

Shop view model:

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

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

Product view Model:

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

When I have 20,000+ products, it uses a lot of memory. Each product has a colors array, which is always empty/null, until the user clicks on it, but it still uses a lot of memory.

Ideally, I'd like to remove the colors observableArray and somehow create it dynamically when user clicks on the product. Or separate it into a new viewModel.

I want to eliminate the empty observableArrays to minimise memory, but can't figure out how it do it.

4
  • You may be interested in checking out CodeReview.StackExchange.com. Your question is well-written and clear, but rather open-ended: there are many ways to solve both your problem at hand (eliminating the array) as well as the underlying problem (having too many objects). Users there can probably help you with both, better than on SO.
    – Jeroen
    May 22, 2014 at 11:03
  • Fair point. I was trying to find a 'question' to ask, but couldn't find the right words. I can't reduce the number of objects. The problem I have is binding to an element, with a DOM tree that is already bound. May 22, 2014 at 12:17
  • instead of loading so many result you can use server side paging
    – Akhlesh
    May 22, 2014 at 16:17
  • I've found its easier and faster for the user to filter (and page) locally, rather than off to the server. May 23, 2014 at 8:14

2 Answers 2

0

I would use one of Knockout's control-flow bindings (if, with) to only bind the colors:foreach when there is actually a colors property on the 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>

Product View Model:

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

Shop View Model

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);
        }
    }
}
1
  • Thanks Michael. That's a good point, but not quite the problem I'm having. This would reduce the DOM size obviously, which would in turn reduce memory usage in the browser. I've already implemented this in my 'fuller' version. The main problem I had was that the observableArray was using up memory, even thought it isn't used very often. May 23, 2014 at 8:18
0

You don't have to store an empty observable array: you can default to undefined and Knockout will treat it as an empty array in a foreach binding.

Here's a demonstration: http://jsfiddle.net/zm62T/

3
  • But if you don't declare it as an observableArray before you do the initial ko.applyBindings, will knockout detect this change? I'm not sure it will. I would need to rebind the element again after I've changed it to an observableArray. Jul 16, 2014 at 10:46
  • Ah, I'd misunderstood your requirement: I didn't realise your colours were liable to change. Hmm, I can see a solution use a sparse map, but that would update every element on any update to the sparse map. Do you really need to show all 20,000 items at once?
    – Rafe
    Jul 16, 2014 at 22:12
  • Ideally yes, but in reality, I think this is impossible. Jul 17, 2014 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.