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}

问题是我无法弄清楚如何从“删除”功能中访问“doctorArr”这个＆＃39;这个＆＃39;返回模型。我需要它来删除该项目。

Answer 1

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

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

Javascript原型并访问'this'的父对象

3 个答案: