从淘汰赛可观察阵列中移除物品

Question

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);
    };
}

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.

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/

Answer 1

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

HTML code

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

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()); });

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.

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

Refer doc to know more about observableArray.

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

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.