从可观察数组中删除的淘汰赛问题

Question

我正在将一个剔除函数数据绑定到我的 html。

下面是视图模型：

  var DonutViewModel = function () {
        this.donuts = ko.observableArray();
        //donutData = JSON.parse(donutData);
        var items = $.map(donutData, function (data) { return new Donut(data) });
        this.donuts(items);
        this.deletedonut = function (item) {
            this.donuts.remove(item);
        }
    }
   var viewModel;
   $(document).ready(function () {
      viewModel = new DonutViewModel();
      ko.applyBindings(viewModel);
   });

以下是html：

 <tr>
    <td><input id="txtdonutid" type="text" data-bind="value:id"/></td>
    <td><input id="txtdonuttype" type="text" data-bind="value:type"/></td>
    <td><input id="txtdonutname" type="text" data-bind="value:dname"/></td>
    <td><input id="txtppu" type="text" data-bind="value:ppu"/></td>
    <td><input type="button" value="Delete Donut" data-bind="click: function() {$parent.deletedonut($data)}"/></td>
</tr>

请注意我是如何对删除功能进行数据绑定的，并且这有效！。但如果我执行以下操作：

  <td><input type="button" value="Delete Donut" data-bind="click: {$parent.deletedonut($data)}"/></td>

好吧，这行不通。删除功能甚至没有被命中。

谁能告诉我我做错了什么？

Answer 1

如果您想在$data. 旁边将其他参数传递给您的处理程序，您只需要在单击绑定中使用function() ... 语法（请参阅documentation：访问事件对象或传递更多参数部分）

但如果你唯一的参数是$data，那么 KO 会自动将它传入，所以你可以写：

<input type="button" value="Delete Donut" 
                     data-bind="click: $parent.deletedonut"/>

注意：不需要{}，您也不需要参数($data)，因为您将$parent.deletedonut 作为对该处理函数的引用传递。

但这本身在您的情况下不起作用，因为您在处理程序中使用this 来访问您的视图模型。

你有两个选择：

您可以使用bind: data-bind="click: $parent.deletedonut.bind($parent)" 在这种情况下您不需要更改您的处理程序。

演示JSFiddle

或者您可以将this 的引用存储在像self 这样的变量中，并在您的处理程序中使用它而不是this。

因此将您的处理程序更改为：

var self = this; 
this.deletedonut = function (item) {
    self.donuts.remove(item);
} 

演示JSFiddle.