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

如果要将附加参数传递给function() ...旁边的处理程序，则只需要点击绑定中的$data.语法（请参阅documentation：访问事件对象，或者传递更多参数部分）

但如果您的唯一参数是$data，那么KO会自动将其传递给您，这样您就可以写下：

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

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

但是这本身不适用于您的情况，因为您在处理程序中使用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.

从可观察数组中删除的敲除问题

1 个答案: