Javascript prototype and accessing parent object of 'this'

Question

In Durandal, I'm working on a page that lists a number of doctors. Each row has a delete button. Here's my View Model:

var Doctor = function() {};

Doctor.Model = function(data) {
  this.id = data.id;
  this.name = ko.observable(data.name);
};

Doctor.prototype.activate = function() {
  this.doctorArr = ko.observableArray();

  // Start Doctor List
  this.load();
};

Doctor.prototype.load = function() {
  // load list into this.doctorArr()
}

Doctor.prototype.remove = function() {
  console.log(this);
};

And here's my View:

<button data-bind="click: remove">Remove Function</button>

<ul data-bind="foreach: { data: doctorArr }">
  <li>
    <span data-bind="text: name"></span> - <a data-bind="click: $parent.remove">Delete...</a>
  </li>
</ul>

Clicking on the <button> will return:

Doctor {doctorArr: function, activate: function…}

But clicking on the link inside the foreach function will return the model:

Doctor.Model {id: "104", name: function}

The problem is that I can't figure out how to access doctorArr from inside the remove function when 'this' returns the Model. I need it to remove the item.

margabit · Accepted Answer · 2013-10-10 14:55:02Z

1

You need to use the method bind to change the 'meaning' of this (the scope) inside the function you are calling. You have some options:

Add the bind to call the ViewModel within the desired scope:

<li>
    <span data-bind="text: name"></span> - <a data-bind="click: $parent.remove.bind($parent)">Delete...</a>
</li>

If you want to remove it without a method in the ViewModel. This will magically remove the item from the array:

<li>
    <span data-bind="text: name"></span> - <a data-bind="click: $parent.doctorArr.remove.bind($parent.doctorArr)">Delete...</a>
</li>

answered Oct 10, 2013 at 14:55

margabit

2,95420 silver badges24 bronze badges

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

Comments

PW Kad · Accepted Answer · 2013-10-10 11:56:04Z

0

The problem is that inside your view model you aren't assigning what 'this' is, so each time you are calling remove it is passing in a different context.

var Doctor = function() {};

Doctor.Model = function(data) {
  var self = this;
  this.id = data.id;
  this.name = ko.observable(data.name);
};

Doctor.prototype.activate = function() {
  var self = this;
  this.doctorArr = ko.observableArray();

  // Start Doctor List
  this.load();
};

Doctor.prototype.load = function() {
  var self = this;
  // load list into this.doctorArr()
}

Doctor.prototype.remove = function() {
  var self = this;
  console.log(this);
};

answered Oct 10, 2013 at 11:56

PW Kad

15k7 gold badges51 silver badges83 bronze badges

1 Comment

Norbert Over a year ago

Even if I assign this to self, it will still return the Model.

Matthew James Davis · Accepted Answer · 2013-10-10 16:32:07Z

0

The first argument knockout passes to your event bindings is the root model:

Doctor.prototype.remove = function(model) {
  console.log(model.doctorArr);
};

answered Oct 10, 2013 at 16:32

Matthew James Davis

12.3k7 gold badges63 silver badges91 bronze badges

Collectives™ on Stack Overflow

Javascript prototype and accessing parent object of 'this'

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related