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

Question

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

   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 属性从可观察数组中删除项目。

<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>

为了快速查看问题，我创建了这个 fiddle 。刚开始学习 knockout ，非常感谢您的帮助。

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 的值，这是一个可观察的值。

Observable 值将在它绑定(bind)的每个地方发生变化，当它的值发生变化时。

相反，您需要创建新对象并将其插入 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 .

希望这能解决您的问题。