從淘汰賽可觀察陣列中移除物品

Question

我具有以下結構的剔除模型。 它包含一個可觀察的數組，該數組又包含一個對象。

   function ViewModel() {
    var self = this;

    self.newItem = ko.observable({        
        manufacturer: ko.observable(),
        itemnumber: ko.observable(),
        itemDescription: ko.observable()    

    });
    self.AllItems = ko.observableArray();      

    self.addItem = function() { 
     self.newItem().manufacturer("test");    
     self.newItem().itemDescription("data");

    self.AllItems.push(self.newItem); 

    };
    self.removeItem = function(data) { 
        self.AllItems.remove(data);
    };
}

第一個問題：通過此腳本，我在文本框中輸入新的項目編號，然后單擊添加項目以將具有文本框中的項目編號的新項目添加到可觀察數組中，但是當我更改項目編號並單擊添加時，它將全部更改數組內的itemnumber。 我怎樣才能在數組內有唯一的數據。

第二個問題：我需要從數組中刪除特定項目，但並沒有刪除它。 有人可以告訴我如何根據itemnumber屬性從可觀察數組中刪除項目。

<input type="text" data-bind="value: newItem().itemnumber"/>
<div>
    Items: <button data-bind="click: addItem">Add Item</button>
</div>
<div>
    <table>
        <tbody data-bind="template: { name: 'itemTemplate', foreach: AllItems }"></tbody>
    </table>
</div>
<script type="text/html" id="itemTemplate">
    <tr>
        <td>
            <input data-bind="value: itemnumber" />
            <a href="#" data-bind="click: $parent.removeItem">Remove Item</a>
        </td>
    </tr>
</script>

我創建這個小提琴是為了快速查看問題。 剛開始學習淘汰賽，所以我們將不勝感激。

http://jsfiddle.net/N3JaW/138/

Answer 1

嘗試以下操作添加新項，這將解決您的第一個問題：-

HTML代碼

<input type="text" id="textBox" data-bind="value : textBoxVal"/>
<div>
    Items: <button data-bind="click: addItem">Add Item</button>
</div>
<div>
<table>
    <tbody data-bind="template: { name: 'itemTemplate', foreach: AllItems }"></tbody>
</table>
</div>
<script type="text/html" id="itemTemplate">
<tr>
    <td>
        <input data-bind="value: itemnumber" />
        <a href="#" data-bind="click: $parent.removeItem">Remove Item</a>
    </td>
</tr>
</script>

JS代碼：-

function ViewModel() {
var self = this;

self.newItem = ko.observable({        
    manufacturer: "",
    itemnumber: "",
    itemDescription: ""   

});

 self.textBoxVal = ko.observable();
 self.AllItems = ko.observableArray();      

self.addItem = function() { 
 self.newItem().manufacturer= "test"; 
 self.newItem().itemDescription= "data";
 self.newItem().itemnumber = self.textBoxVal();

self.AllItems.push(self.newItem); 

};
self.removeItem = function(data) { 
    self.AllItems.remove(data);
};
}
$(document).ready(function() {ko.applyBindings(new ViewModel()); });

您的第一個問題是因為，每次嘗試添加新項目時，您都在更改itemNumber的值，這是可以觀察到的。

當可觀察值的值更改時，它在綁定的每個位置都會更改。

相反，您需要創建新對象並將其推入observableArray。

請參閱doc，以了解有關observableArray的更多信息。

對於第二個問題，更改removeItem ，如下所示：

 self.removeItem = function(data) {
var dtIndex = self.AllItems.indexOf(data); //Get the index of the object you want to remove.
    self.AllItems.splice(dtIndex, 1); //Then do splice
};

您可以參考上面的文檔，以了解如何使用splice 。

根據評論中的建議進行編輯：-

有關已編輯答案的工作代碼， 請單擊此處 。

希望這能解決您的問題。