knockoutjs haga clic en el enlace dentro de Foreach vinculante

Question

EDITAR: El problema no estaba relacionado con el enlace sino con un simple error de JavaScript.

Tengo una pregunta sobre un enlace de clic dentro de un enlace foreach. Tengo una lista con elementos que muestran un cuadro desplegable para seleccionar un valor de los datos maestros. Los artículos se pueden agregar y eliminar de esa lista. El botón para eliminar elementos está anidado en el enlace foreach. Por lo tanto, esperaba que debería vincularlo con $ parent>

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

Eso no funciona. Pero la siguiente versión funciona:

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

No entiendo por qué.

El código:

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

He creado un violín (con la versión no funciona): http://jsfiddle.net/delixfe/NWWH8/

Gracias por su ayuda.

Answer 1

¡Me tienes por un segundo!

Está en lo cierto, $parent es necesario. Tu error no fue definir self en tu modelo de vista. Después de hacerlo, se requirió $parent en removeButton, así como el enlace masterData.

Aquí está un violín de trabajo: http://jsfiddle.net/FpSWb/