从淘汰赛可观察到的阵列中移除物品 [英] Remove items from Knockout observable array

问题描述

我具有下面的剔除模型结构.它包含一个可观察的数组，该数组又包含一个对象.

I have the below structure for knockout model. It contains an observable array which in turn contains an object.

   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.我如何在数组内部拥有唯一数据.

First issue:Through this script I am entering a new itemnumber in the textbox and then clicking on add item to have the new item with the itemnumber from the textbox added to the observable array but when I change the item number and hit add it changes all the itemnumber inside the array. How can i have unique data inside the array.

第二个问题:我需要从数组中删除特定项目，但并没有删除它.有人可以告诉我如何说出itemnumber属性来从可观察数组中删除项目.

Second issue: I need to remove the specific items from the array but it's not deleting it. Can someone please tell me how I can delete items from the observable array based on say the itemnumber property.

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

我创建此小提琴是为了快速查看问题.刚开始学习淘汰赛，所以我们将不胜感激.

I have created this fiddle for quick view of the issue. Just started learning knockout so any help is appreciated.

http://jsfiddle.net/N3JaW/138/

推荐答案

请尝试以下操作添加新项，这将解决您的第一个问题:-

Try the following for adding new item, which will solve your first issue:-

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的值，这是可以观察到的.

Your first issue was because, each time you are trying to add a new item, you were changing the value of itemNumber, which is an observable.

可更改的值在其值更改的每个位置都会更改.

Observable value will be changed every where it is binded, when it's value is changed.

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

Instead you need to create new object and do push into the observableArray.

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

Refer doc to know more about observableArray.

对于第二个问题，请按以下说明更改removeItem:-

For your second problem change removeItem as given below:-

 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.

You can refer the above doc, to know how to use splice.

根据评论中的建议进行-

EDIT based on the suggestion in the comment :-

有关已修改答案的工作代码，请单击此处.

For working code of edited answer click here.

希望这可以解决您的问题.

Hope this will solve your problem.

这篇关于从淘汰赛可观察到的阵列中移除物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！