javascript - Passing $index and $data as arguments to function for click handler -

i passing $index , $data change_model function. function expecting 2 parameters in following order: (index, data).

from viewmodel passing click: $root.change_model.bind($data, $index()). within function index prints $data, , data prints index: values reversed.

self.change_model = function(index, data) {   self.patternselectedindex(index);   selected_door = data.file;   create_door(); }; 

<div data-bind="foreach: x.patterns">     <div class="thumbnail" data-bind="css: { selected: $index() === $root.patternselectedindex() }">       <img class='img model' style='width:164px;height:90px;padding:5px' data-bind="attr:{src:'images/models/' + $data.file + '.png'}, click: $root.change_model.bind($data, $index())" />       <div class="caption">         <span data-bind="text: $data.name"></span>       </div>     </div> </div> 

the first argument of bind become this inside function, because knockout merely using the regular bind function.

you can either pass $data or $root first (thisarg) argument, or pass null or undefined, don't need since seem use self = this idiom.

for example:

var viewmodel = function () {      var self = this;        self.change_model = function (index, data) {          console.log(this);          console.log(index);          console.log(data);          // actual code here      };        self.x = { patterns: [{ file: 'some-file', name: 'some-name' }] };  };    ko.applybindings(new viewmodel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>    <div data-bind="foreach: x.patterns">      <button data-bind="click: $root.change_model.bind($data, $index(), $data)">click me!</button>      <span data-bind="text: $data.name"></span>  </div>