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函數將返回mod EL：

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

的問題是，我無法弄清楚如何從刪除函數內部訪問doctorArr當「這個」返回模型。我需要它來移除物品。

Answer 1

您需要使用方法bind來更改您正在調用的函數內部的「含義」（範圍）。如果您希望在不視圖模型的方法來刪除它

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

：你有一些選擇：

添加bind到所需的範圍內調用視圖模型。

<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

的第一個參數傳遞淘汰賽你的事件綁定是根模型：

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