knockoutjs Klick-Bindung innerhalb foreach Bindung

Question

EDIT: Problem wurde nicht mit der Bindung, sondern mit einem einfachen JavaScript-Fehler verbunden.

Ich habe eine Frage bezüglich einer Klickbindung innerhalb einer foreach-Bindung. Ich habe eine Liste mit Elementen, die ein Dropdown-Feld zeigen, um einen Wert aus den Stammdaten auszuwählen. Elemente können hinzugefügt und aus dieser Liste entfernt werden. Die Schaltfläche zum Entfernen von Elementen ist in der foreach-Bindung verschachtelt. Deshalb habe ich erwartet, dass ich es mit $ Eltern>

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

binden sollte Das funktioniert nicht. Aber die folgende Version funktioniert:

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

Ich verstehe nicht warum.

Der Code:

<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);​ 

Ich habe eine Geige erstellt (mit der nicht funktionierende Version): http://jsfiddle.net/delixfe/NWWH8/

Vielen Dank für Ihre Hilfe.

Answer 1

Sie hatten mich für eine Sekunde!

Sie sind richtig, $parent sollte erforderlich sein. Ihr Fehler hat self in Ihrem Viewmodel nicht definiert. Danach war $parent auf der removeButton sowie der masterData Bindung erforderlich.

Hier ist eine Arbeitsgeige: http://jsfiddle.net/FpSWb/