Creating new function returns it empty in Javascript and Knockout

Question

I have simple knockout viewmodel:

function HumanViewModel(humanViewModel) {
  if (humanViewModel=== undefined || humanViewModel=== null) {
    humanViewModel= {};
  }

  var self = this;

  var Id = humanViewModel.Id || '';
  var Name = humanViewModel.Name || '';
}

I'm fetching some json data from a server, to fill this model, here is what's going on success:

 var result = [];
      for (var i = 0; i < receivedData.length; i++) {
        var vm = new HumanViewModel({ Id: receivedData[i].Id, Name: receivedData[i].Name });
        result.push(vm);
      }
      self.Humans.push.apply(self.Humans, result);

The problem is here: var vm = new HumanViewModel({ Id: receivedData[i].Id, Name: receivedData[i].Name });. Variable vm contains HumanViewModel, but this viewmodel doesn't contain Id and Name, it simply contains nothing;

However, when I'm looking at debugger, inside HumanViewModel everything works fine, but in the end, vm contains nothing.

I have no idea, where data have been lost. How can I solve this problem?

Guilherme Fujiyoshi · Accepted Answer · 2016-11-29 16:44:53Z

2

Instead of storing the ID and name in a variable, you should save it on the function context.

The following code should work:

function HumanViewModel(humanViewModel) {
  if (humanViewModel=== undefined || humanViewModel=== null) {
    humanViewModel= {};
  }

  var self = this;

  this.Id = humanViewModel.Id || '';
  this.Name = humanViewModel.Name || '';
}

Whenever you call new HumanViewModel, you will get a HumanViewModel wish the id and name because you set them using this, which refers to the HumanViewModel in this scope.

edited Nov 29, 2016 at 16:44

answered Nov 29, 2016 at 16:17

Guilherme Fujiyoshi

4713 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mateen Kajabadi · Accepted Answer · 2016-11-29 17:44:38Z

When you define var self = thisyou have immediate access to a value of this that refers to the instance being created.

self is being used to make sure the original this value is maintained within the object. For example if you have a computed observable it can be bound to the appropriate value of this. So once you assign this to self within your object you can use self.Id = ....

Example : https://jsfiddle.net/kyr6w2x3/135/

var data = [{ Id: 1, Name: "Name 1" },{ Id: 2, Name: "Name 2" },{ Id: 3, Name: "Name 3" } ];

function MainViewModel(){
   var self = this;
   self.Humans = ko.observableArray([]);

   //on success
     self.Humans($.map(data, function (item) {
    return new HumanViewModel(item);
  }));
}

function HumanViewModel(data) {
  var self = this;
  self.Id = ko.observable(data.Id);
  self.Name = ko.observable(data.Name);
}

var viewModel = new MainViewModel();
ko.applyBindings(viewModel);

Collectives™ on Stack Overflow

Creating new function returns it empty in Javascript and Knockout

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related