javascript - knockoutjs click binding within foreach binding -

edit: problem not related binding simple javascript mistake.

i have question concerning click binding within foreach binding. have list items showing drop down box select value master data. items can added , removed list. button remove items nested in foreach binding. therefore expected should bind $parent>

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

that not work. following version works:

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

i not understand why.

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

i have created fiddle (with not working version): http://jsfiddle.net/delixfe/nwwh8/

thanks help.

you had me second!

you correct, $parent should required. mistake not defining self in viewmodel. after doing that, $parent required on removebutton, masterdata binding.

here working fiddle: http://jsfiddle.net/fpswb/