Knockoutjs Observable And Jquery Extends Function

Let's say I have the following code: var Klass = function(){ var self = this; this.value = 123; this.update = function(){ $.ajax({ url: '/whatever', async:

Solution 1:

First issue is that you are extending self, which is a scoped variable and only exists inside the Klass function, not it's instances you create by calling it.

You'll need to call $.extend(this, data); if you need to overwrite value when calling update. Although I do understand why you are using self there. But the observable functionality added by calling ko.mapping.fromJS is then lost. value is no longer a function (ko observable) but a scalar value (234). You have to call obj = ko.mapping.fromJS(obj); again to wrap value as observable.

Second issue is that $.get is asynchronous so calling console.log(obj) right after calling obj.update will log the value before the GET response comes. You need to wait for it to execute (use a callback).

Here's a working fiddle.

varKlass = function(){
  this.value = 123;

  this.update = function(callback){
      var self = this;
      $.get('/', function(data) {
          $.extend(self, {value: 234});
          callback.call(undefined);
      });
  }
}
var obj = newKlass();
obj = ko.mapping.fromJS(obj);
console.log(obj.value());

obj.update(function() {
    obj = ko.mapping.fromJS(obj);
    console.log(obj.value());
});