Javascript 从淘汰可观察数组中移除项目

我有以下击倒模型的结构。它包含一个可观察数组，该数组又包含一个对象

   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，然后单击add item，将带有文本框中itemnumber的新项目添加到可观察数组中，但当我更改项目编号并单击add时，它会更改数组中的所有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>

项目：添加项目

我制作这把小提琴是为了快速了解这个问题。我刚开始学习击倒，非常感谢您的帮助

---

尝试以下添加新项目，这将解决您的第一个问题：-

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>

您的第一个问题是，每次尝试添加新项目时，您都在更改

itemNumber

的值，该值是可观察的

当可观察值的值发生变化时，可观察值在绑定的每个位置都会发生变化

相反，您需要创建新对象并将其推入ObservalArray

请参阅了解更多有关observableArray的信息

对于第二个问题，请更改

removietem

，如下所示：-

 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

根据评论中的建议进行编辑：-

用于编辑答案的工作代码

---

希望这能解决您的问题。

虽然技术上正确，但这并不是一个理想的解决方案，因为视图模型现在需要DOM的知识，这与拥有视图模型的基本原理背道而驰。我不想根据您的工作创建一个全新的答案，因此我只想在这里补充一点，更好的解决方案是使用observable将值存储在

文本框中，然后在
addItem
中检索此observable的值。瞧！现在视图模型独立于DOM。太棒了。非常感谢您。如果答案有用的话，您能接受吗？：）@awj根据您的评论进行了更改。谢谢你指出这一点。
 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
};