Question

So, I’m grabbing a number from a model, and trying to use that number (the length of an observable array) to dynamically control the number of objects in a “sub-model.” In this case, when I add or remove “meta headings” in the parent model, the child model will automatically have the right number of corresponding “meta fields.”

So this grabs the length of the array I’m basing things on:

self.metaCount = ko.computed(function() { 
        return parent.metaHeadings().length; 
}); 

This is the array I want to dynamically push objects into:

self.metaColumns = ko.observableArray([]); 

And this is how I’m trying to dynamically push items into the array:

self.columnUpdate = ko.computed(function() { 
        for (i=0; i<self.metaCount(); i++) { 
                self.metaColumns.push({heading: ko.observable()}); 
        } 
}); 

Now, I’m doing all of this in the model. The reason is that I have several instances of models and sub-models, and it makes more sense to have each one handle its own updating when a change takes place.

Am I going about this all wrong?

Answer 1

I would say it depends on your requirements. Firstly does your current code work correctly? If not what are the problems?

Is the metaColumns array required to to editable independently? If the answer is no then why maintain them as a separate property when you could simply do:

self.metaColumns = ko.computed(function() { 
    var result = [];
    for (i=0; i<self.metaCount(); i++) { 
        self.metaColumns.push({heading: ko.observable()}); 
    } 
    return result;
}); 

I notice that you currently aren’t clearing the metaColumns array when the columnUpdate is recomputed so it will keep adding to the array.

Hope this helps.