淘汰賽js刪除不起作用

我試圖讓我的頭在淘汰賽js周圍觀察！但是，我正面臨着在可觀察數組上執行remove函數的問題。淘汰賽js刪除不起作用

我的JS是如下：

$(function() { 
    var data = [{ name: "name1" }, { name: "name2" }, { name: "name3"}]; 
    var viewModel = { 
     namesList: ko.observableArray(data), 
     nameToAdd: ko.observable("name4"), 
     myCustomAddItem: function() { 
      this.namesList.push({ name: this.nameToAdd() }); 
     }, 
     myCustomRemove: function() { 
      console.log("before + " + this.nameToAdd()); 
      this.namesList.remove(this.nameToAdd()); 
      console.log("after + " + this.nameToAdd()); 
     } 
    }; 
    ko.applyBindings(viewModel); 
});

和我的HTML是：

Name To add/remove <input type="text" data-bind="value: nameToAdd, valueUpdate: 'afterkeydown'"/> 
<ul data-bind="template: {name: 'listTemp1', foreach :namesList}"> 

</ul> 
<p> 
    <button data-bind="click: myCustomAddItem">Add Item</button> 
    <button data-bind="click: myCustomRemove">Remove Item</button> 

    <script id="listTemp1" type="text/html"> 
     <li data-bind="text:name"> </li> 
    </script> 
</p>

我myCustomAddItem工作正常，但不是myCustomRemove。我還在this.namesList.remove(this.nameToAdd());之前和之後放置了一個console.log，以查看是否有任何錯誤，但是在那裏我看不到任何錯誤。當我點擊「刪除項目」按鈕時，螢幕控制檯會顯示日誌，但該項目並未從列表中移除。

任何幫助表示讚賞

來源

2011-12-30 CjCoax

到remove的參數應該是返回true或false是否刪除一些功能。

它的功能與filter功能非常類似。

在你的情況，這樣的事情應該工作：

myCustomRemove: function() { 
    console.log("before + " + this.nameToAdd()); 

    var nameToAdd = this.nameToAdd(); 
    this.namesList.remove(function(item) { 
     //'item' will be one of the items in the array, 
     //thus we compare the name property of it to the value we want to remove 
     return item.name == nameToAdd; 
    }); 

    console.log("after + " + this.nameToAdd()); 
}

來源

2011-12-30 13:19:03

[這應該是賈尼答案評論，但我仍然不能評論別人發佈，抱歉] 只是一個小的澄清：從技術上講，您可以調用remove（）傳遞元素以移除元素，請參閱http://knockoutjs.com/documentation/observableArrays.html上的「remove和removeAll」部分。你的代碼的問題是'data'數組中的元素是對象（包含一個名爲'name'的屬性），並且你要求從數組中刪除字符串「name4」（或者任何'nameToAdd'包含）。

可以被誘惑創建一個新的對象傳遞給去掉，這樣的：

// old code 
//this.namesList.remove(this.nameToAdd()); 
this.namesList.remove({ name: this.nameToAdd() });

，但仍然失敗，因爲JavaScript對象平等的工作方式（見，例如：How to determine equality for two JavaScript objects?）。

因此，最後你需要使用該功能。

在這個簡單的例子中，您還可以將'namesList'數組轉換爲簡單的字符串數組，並在模板中綁定「$ data」。見http://jsfiddle.net/saurus/usKwA/。在更復雜的情況下，也許你不能避免使用對象。

來源

2011-12-30 17:10:53 saurus

感謝您的詳細評論。它真的有助於瞭解現在發生了什麼:) – CjCoax 2011-12-30 22:13:52

[observableArray] .remove（function（item）{return item。[whatever] == [somevalue];}）;

來源

2012-06-19 09:48:09 jwize

淘汰賽js刪除不起作用

回答

相關問題