Efficient strategy for updating numerous fields of an object in an observable array?

Question

I have an observable array of say 20 objects. Each object has some 30 fields each of which is an observable over a value that is bound to an attribute of an SVG object. So basically these objects represent different shapes in SVG. All attributes are required to be able to change dynamically and all changes have to be reflected in SVG. It doesn't seem a good idea to me to have an observable for each changeable property because it totals to 20 * 30 = 600 observables.

Are there more efficient ways to approach this in terms of having less observables? What are they?

Answer 1

Don't make the properties observables. Update the non observable properties on the objects in the observable array and then call valueHasMutated() on the observable array this should force the properties to be re-bound to the view.

Another method from Refresh observableArray when items are not observables is to do a dirty refresh:

self.refresh = function(){
    var data = self.array().slice(0);
    self.array([]);
    self.array(data);
};