Question

I am using knockout for the first time and I am trying to make a web page to allow a user to create a list of items that contains an image url. I have managed to databind the img src attribute but if I update it later with a jquery function, when it comes to save the knockout model the new src value is not taken.

Here is a fiddle of a simplified version of my page – http://jsfiddle.net/TurUh/4/

If you click the save button you can see the model takes the original image src (test.png). If you then use the Change Images button the image src is updated to (changed.png), you can test with firebug to confirm the html is changed. If you then click the save button again, the model uses the old src value (test.png).

Am I doing something wrong? Can anyone suggest how to resolve this issue?

Answer 1

You’re on the right track, but you’ve moved away from using Knockout objects latter on in your code, rather than updating your ViewModel on the button clicks.

I’ve updated your code here in order to function properly, see what you think:

http://jsfiddle.net/TurUh/6/

For anyone else tackling this problem, the changeImage function needs putting into the ViewModel and the ViewModel objects require updating, such as:

// Update the whole project array
self.changeImages = function() {
   for(var i=0; i < self.projects().length; i++)
   {
         self.projects()[i].ImageURL('changed.png');
   }
};

Bear in mind that the ImageURL also needs making into an observable object, within the project array.