중첩 된 관찰 가능 배열에서 녹아웃 함수를 호출하는 방법

Question

브랜드 목록이 있고 브랜드에 자동차 목록이 있습니다. 녹아웃에서 간단한 뷰 모델을 http://jsfiddle.net/PZqEk/1/에 선언했습니다. 제거 버튼을 클릭하면 this.cars는 removeCar 함수에서 정의되지 않습니다. 가장 좋은 방법으로 클릭 한 자동차를 삭제하는 방법은 무엇입니까?

HTML :

<h1 data-bind="text:title"></h1> 
<table> 
    <tbody data-bind="foreach: brands"> 
     <tr> 
      <td> 
       <span data-bind="text: nameOfBrand"></span> 
       <ul data-bind="foreach: cars"> 
        <li> 
         <span data-bind="text: nameOfCar"></span> 
         (<span data-bind="text: yearOfCar"></span>) 
         <input data-bind="click: $root.removeCar" type="button" value="remove"/> 
        </li> 
       </ul> 
      </td> 
     </tr> 
    </tbody> 
</table> 

자바 스크립트 :

function RootModel() 
{ 
    this.title = ko.observable("Dummy Title"); 
    this.brands = ko.observableArray(); 

    var b1 = new brandModel("Audi"); 
    b1.cars.push(new carModel("A3", 2005)); 
    b1.cars.push(new carModel("A6", 2005)); 

    var b2 = new brandModel("Volkswagen"); 
    b2.cars.push(new carModel("Golf", 2010)); 
    b2.cars.push(new carModel("Passat", 2008)); 
    b2.cars.push(new carModel("Polo", 2012)); 

    this.brands.push(b1); 
    this.brands.push(b2); 
} 

function brandModel(name) 
{ 
    this.nameOfBrand = ko.observable(name); 
    this.cars = ko.observableArray(); 

    this.removeCar = function(car){ 
     this.cars.remove(car); // this.cars = undefined; 
    } 
} 

function carModel(name, year){ 
    this.nameOfCar = ko.observable(name); 
    this.yearOfCar = ko.observable(year); 
} 

ko.applyBindings(new RootModel()); 

감사

Answer 1

문제는 인스턴스에서 호출되지 않은 함수에서 this를 액세스하는 것입니다. 별칭이 필요합니다.

function brandModel(name) { 
    var self = this; // alias 
    self.nameOfBrand = ko.observable(name); 
    self.cars = ko.observableArray(); 

    self.removeCar = function(car) { 
     self.cars.remove(car); // access through the alias instead 
    } 
} 

Answer 2

제프는 (일반적으로 모델의 상단에 self = this;를 선언하여) this의 별명을해야한다는 점에서 정확, 나는 당신이 만드는 모든 녹아웃 응용 프로그램에 대한 그 일을 추천 할 것입니다.

<input data-bind="click: function(data, event) { $parent.removeCar(data); }" type="button" value="remove"/> 

및 작동 한 바이올린, 유일한 변화에 따라 :

그러나, 나는 당신이 처음에 this를 사용하여, 바로이 코드를 시도하고 있음을 통보하지 않았다.