從敲除可觀察陣列中刪除項目

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新項目，但是當我更改項目數字並點擊添加它會更改數組內的所有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()); }); 

你第一個問題是因爲，每當你試圖添加一個新的項目，你w改變了可觀察的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。

編輯基於註釋的建議： -

對於工作編輯答案click here的代碼。

希望這會解決您的問題。