从敲除可观察阵列中删除项目

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的代码。

希望这会解决您的问题。