将$ index和$ data作为参数传递给单击处理程序

Question

我将$index和$data传递给change_model函数。 该函数按以下顺序期望2个参数：（ (index, data) 。

从viewModel我传递click: $root.change_model.bind($data, $index()) 。 在函数中， index打印$data ，而data打印index ：值相反。

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>

Answer 1

的第一个参数bind将成为this因为淘汰赛仅仅使用自己的函数中， 经常bind功能 。

您可以传递$data或$root作为第一个（ thisArg ）参数，也可以传递null或undefined，因为您实际上不需要它，因为您似乎使用了self = this习惯用法。

例如：

 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>