1

我正在将数据绑定到我的 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>

好吧，这行不通。删除功能甚至没有受到打击。

有人可以告诉我我做错了什么吗？

4

1 回答 1

1

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

但是，如果您唯一的参数是，$data那么 KO 将自动将其传入，因此您只需编写：

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

注意：不需要 the{}并且您也不需要参数，($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。

于 2013-06-06T07:46:38.447 回答