CODEWITHSUNDEEP
javascriptknockout.jsdata-binding
MikeW
MikeW

Reputation: 1620

binding updates in knockout.js

This may well be a very basic problem for anyone familiar with knockout.js, however it is causing me a problem.

I have a situation where I have a model containing an array of items that is dynamically added to and displayed in the view.

So far no problem, I can add entries into the model and the view is updated appropriately.

However. each item in the array itself has an array as a property, this is an array of object, and when I update the properties on these objects the view is not updated.

It is difficult to demonstrate this is a short code snippet so I have created a JsFiddle to show the problem:

https://jsfiddle.net/mikewardle/t0nvwqvL/1/

I have tries making the properties generated by calling 

ko.observable()

rather than initializing them directly, but to no avail.

clicking the add button adds items to the array on the model itself.

either of the change... buttons alters the properties of the objects in the inner array.

Upvotes: 0

Views: 43

Answers (1)

Jason Spake
Jason Spake

Reputation: 4304

As Ko2r stated your properties are not declared as observables and therefore updates will not be noticed by knockout.

To fix your changecolors() function you just need to change your linePusher function to create the color as an observable:

var linePusher = function (color, name) { 
    self.lines.push({ color: ko.observable(color), name: name, current:0 });
};

and then update usages of the color property to box/unbox the observable instead of replacing its value with the standard assignment operator, "="

for (i=0;i<counters.length;i++){        
  var lines = counters[i].lines();
  for (j=0;j<lines.length;j++){
    //lines[j].color = color;
    lines[j].color(color); //sets the existing observable to the new value
  }
}

Unfortunately I can't seem to make sense of your code enough to figure out what the increment() function is supposed to be doing so I can't tell you how to fix it, but hopefully the fixes to changecolors() put you on the right track.

You might want to read up on working with observables

Upvotes: 2

Related Questions