Javascript原型和访问“this”的父对象

Javascript prototype and accessing parent object of 'this'

本文关键字：对象 this 原型 访问 Javascript      更新时间：2023-09-26

在杜兰达尔，我正在开发一个列出许多医生的页面。每行都有一个删除按钮。这是我的视图模型：

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"返回模型时，我无法弄清楚如何从删除函数内部访问 doctorArr。我需要它来删除该项目。

您需要使用方法bind来更改您正在调用的函数中这个(范围(的"含义"。您有一些选择：

添加bind以在所需范围内调用视图模型：

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

如果要在视图模型中不使用方法将其删除。这将神奇地从数组中删除该项目：

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

问题是在你的视图模型中，你没有分配"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);
};
传递给

事件绑定的第一个参数 KNOCKOUT 是根模型：

Doctor.prototype.remove = function(model) {
  console.log(model.doctorArr);
};
相关文章：