從可觀察數組中刪除問題

我正在將數據綁定到我的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>

好吧，這是行不通的。刪除功能甚至沒有被擊中。

有人能告訴我我做錯了什麼嗎？

來源

2013-06-06 devC

寫'數據綁定= 「點擊：函數（）{$ parent.deletedonut（$數據）}」'是正確的語法。你爲什麼要寫'data-bind =「點擊：{$ parent.deletedonut（$ data）}」'？ – nemesv

好吧，如果你看看http://knockoutjs.com/documentation/click-binding.html，點擊事件的綁定語法是data-bind =「click：myfunction」。這並不是說你必須在點擊綁定中使用function（）。那爲什麼它不同？ – devC

但是如果你想增加參數，你需要這個語法。請參閱data-bind =「click：{$ parent.deletedonut（$ data）}」的說法。但在你的情況下，以下應該工作：'data-bind =「點擊：$ parent.deletedonut」' – nemesv

，如果你想額外的參數傳遞到處理程序旁邊的$data.（見documentation：訪問事件對象，或傳遞多個參數部分），您只需要在function() ...語法在點擊綁定

但如果你唯一的參數是$data然後KO會自動傳遞，在這樣你就可以這樣寫：

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

注：沒有必要爲{}，你也不必爭論以及($data) b因爲你通過$parent.deletedonut作爲處理函數的參考。

但它本身不適用於您的情況，因爲您在處理程序中使用this來訪問您的視圖模型。

你有兩個選擇：

您可以使用bind：data-bind="click: $parent.deletedonut.bind($parent)"在這種情況下，你不需要改變你的處理程序。

演示JSFiddle

或者你可以存儲在像self一個變量的this的參考和使用，在您的處理程序，而不是this。

所以你的處理器更改爲：

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

演示JSFiddle.

來源

2013-06-06 07:46:38 nemesv

不幸的是，這不適用於我:(我試着創建一個小提琴，但它破碎了http：/ /jsfiddle.net/bxfXd/2269/ – devC

@chathuranganiePathirage看到我的更新回答。 – nemesv

非常感謝！這是有道理的。在delete/add函數中使用'this'可以設置對頂部對象的引用，而不是甜甜圈。解釋這一點。 – devC

從可觀察數組中刪除問題

回答

相關問題