Передача $ index и $ data в качестве аргументов функции для обработчика кликов

Question

Проникаю $index и $data в функцию change_model. Функция ожидает 2 параметра в следующем порядке: (index, data).

С точки зрения модели Я прохожу 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 внутри вашей функции, потому что Нокаут просто использует the regular bind function.

Вы можете либо передать $data или $root в качестве первого (thisArg) аргумента, или передать нуль или не определен, как вы на самом деле не нужны, так как вы, кажется, использовать 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>