javascript - Javascript原型和访问'this'的父对象

Question

在 Durandal，我正在制作一个列出许多医生的页面。每行都有一个删除按钮。这是我的视图模型：

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);
};

这是我的观点：

<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>

点击<button>会返回：

Doctor {doctorArr: function, activate: function…}

但是单击 foreach 函数内的链接将返回模型：

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

问题是当“this”返回模型时，我无法弄清楚如何从删除函数内部访问医生Arr。我需要它来删除该项目。

Answer 1

您需要使用该方法bind在您正在调用的函数中更改 this（范围）的“含义”。你有一些选择：

添加bind以在所需范围内调用 ViewModel：

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

如果您想在 ViewModel 中没有方法的情况下将其删除。这将神奇地从数组中删除该项目：

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

Answer 2

问题在于，在您的视图模型中，您没有指定“this”是什么，因此每次调用 remove 时，它​​都会在不同的上下文中传递。

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);
};

Answer 3

第一个参数 knockout 传递给您的事件绑定是根模型：

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