从 Knockout 可观察数组中删除项目

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。

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

对于编辑答案click here的工作代码。

希望这能解决您的问题。