将$ index和$ data作为参数传递给click处理程序的函数

时间:2015-06-18 21:41:05

标签: javascript knockout.js knockout-3.0

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

从viewModel我传递click: $root.change_model.bind($data, $index())。在函数index中打印$datadata打印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>

1 个答案:

答案 0 :(得分:2)

bind的第一个参数将在您的函数中变为this,因为Knockout仅使用the regular bind function

您可以将$data$root作为第一个(thisArg)参数传递,也可以传递null或undefined,因为您似乎并不需要它使用self = this成语。

例如:

&#13;
&#13;
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());
&#13;
<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>
&#13;
&#13;
&#13;