Knockoutjs click binding in foreach binding

Question

EDYCJA: Problem nie był związany z wiązaniem, ale prostym błędem JavaScript.

Mam pytanie dotyczące wiązania kliknięcia w ramach wiązania foreach. Mam listę z elementami pokazującymi rozwijane pole wyboru, aby wybrać wartość z danych podstawowych. Elementy można dodawać i usuwać z tej listy. Przycisk do usuwania elementów jest zagnieżdżony w wiązaniu foreach. Dlatego też spodziewałem się, że powinnam go powiązać z $ parent>

<button data-bind="click: $parent.removeNumber">-</button> 

To nie działa. Ale działa następująca wersja:

<button data-bind="click: removeNumber">-</button> 

Nie rozumiem dlaczego.

Kod:

<h2>numbers:</h2> 
<ul data-bind="foreach: numbers"> 
    <li> 
     <select data-bind="value: id, 
          options: masterData, 
          optionsText: 'caption', 
          optionsValue: 'id'"></select> 
     <br /> 
     value: <span data-bind="text: id"></span> 
     <br /> 
     <button data-bind="click: $parent.removeNumber">-</button>  
    </li> 
</ul> 
<button data-bind="click: addNumber">+</button> 

function ViewModel() { 
    self.masterData = [{ id: 1, caption: "One"}, 
         { id: 2, caption: "Two"}]; 

    self.numbers = ko.observableArray([{ 
     id: ko.observable(2)}]); 

    self.addNumber = function() { 
     self.numbers.push({ 
      id: ko.observable(2) 
     }); 
    }; 


    self.removeNumber = function(item) { 
     self.numbers.destroy(item); 
     console.log("removed" + item); 
    }; 
} 

var viewModel = new ViewModel(); 
ko.applyBindings(viewModel);​ 

Stworzyłem skrzypce (z wersji nie działa): http://jsfiddle.net/delixfe/NWWH8/

Dzięki za pomoc.

Answer 1

Masz mnie na sekundę!

Masz rację, $parent powinno być wymagane. Twoim błędem nie było zdefiniowanie self w swoim modelu widoku. Po wykonaniu tej czynności wymagane było $parent na removeButton, a także powiązanie masterData.

Oto skrzypce pracy: http://jsfiddle.net/FpSWb/