观察到的js副本的observableArray

Question

How to make copy of self.items and place values in self.copy ? I tried to do self.copy(self.items.slice()); but it does not work

 function MyViewModel() { var self = this; self.items = ko.observableArray(); self.copy = ko.observableArray(); self.items.push({ id: 1, name: 'Jhon' }); self.items.push({ id: 2, name: 'Smith' }); self.copy(self.items.slice()); self.alarm = function (data) { var itemsWithSameId = self.copy().filter(function (item) { return item.id === data.id; }); var theItem = itemsWithSameId[0]; debugger; } } ko.applyBindings(new MyViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script> <table> <thead> <tr> <th>Passenger name</th> </tr> </thead> <tbody data-bind="foreach: items"> <tr> <td><input class="target" data-bind="value: name, event: { change: $root.alarm}" /></td> </tr> </tbody> </table> 

Answer 1

The problem is that when you copy an object, you're copying references rather than data. Using slice is good for dealing with arrays if the contents are not objects, but yours are.

What you can do is use ko.toJS to make a deep copy (as long as you're just interested in comparing non-object members).

 function MyViewModel() { var self = this; self.items = ko.observableArray(); self.copy = ko.observableArray(); self.items.push({ id: 1, name: 'Jhon' }); self.items.push({ id: 2, name: 'Smith' }); self.copy(ko.toJS(self.items())); self.alarm = function (data) { var itemsWithSameId = self.copy().filter(function (item) { return item.id === data.id; }); var theItem = itemsWithSameId[0]; debugger; } } ko.applyBindings(new MyViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script> <table> <thead> <tr> <th>Passenger name</th> </tr> </thead> <tbody data-bind="foreach: items"> <tr> <td><input class="target" data-bind="value: name, event: { change: $root.alarm}" /></td> </tr> </tbody> </table>