Knockout.js: Changing the value of Observable does not change the value of attribute in html

Question

I have a fairly simple file which renders a pencil image like this:

define(['durandal/events', 'knockout'], function (events, ko) {

    var pencilVM= function () {
    this.pencilimagepath = ko.observable("img/pencil.png");
    };

    return pencilVM;
});

and a html:

<div>
 <img data-bind="attr: {src: pencilimagepath}" />
</div>

Now when I change the name of the image from pencil.png to someImg.png, the final html rendered in the browser is not updated. It stills stays as "pencil.png"

Answer 1

I think the browser is caching the image.

Just add the timestamp to your new image source

var d = new Date();
this.pencilimagepath("img/someImg.png" + d.getTime());

Hope that helps.