sp9 sp9 - 6 months ago 18
jQuery Question

Best way of cloning/copying a observable in Knockout

I have a knockout Model

self.newItem = ko.observable({
manufacturer: ko.observable(),
itemnumber: ko.observable(),
itemDescription: ko.observable(),
priceclass: ko.observable()

});


and I have another one which has the same properties but only the itemnumber is observable.

self.newItemToInsert = ko.observable({
manufacturer: "",
itemnumber: ko.observable(),
itemDescription: "",
priceclass: ""

});


I have another observable array to store the items

self.AllItems = ko.observableArray();


Now my question is how can I copy the newitem to newItemToInsert observable so I can save it to AllItems array and have the itemnumber be observable for different rows in the array. So if I add 10 items I want to be able to track the data changes in each of the 10 itemnumber properties.

Thanks

Answer

If I got your question correctly ,you can have a separate view model for your items and for each items you create a new instance of that model. Then inside your Item View Model you define observable for any variables that you want.

Example :https://jsfiddle.net/9aLvd3uw/222/

VM:

var MainViewModel = function () {
   var _self = this;
   var i = 1;
   _self.Items = ko.observableArray([]);
   //Fake Data
   _self.Items.push(new ItemViewModel({ "manufacturer": "Co.0", "itemnumber": 123 ,"itemDescription": "Desc 0" , "priceclass" : "Class 0"}));
   //Add a new item with fake data
   self.ClickMe = function (){
     _self.Items.push(new ItemViewModel({ "manufacturer": "Co."+i, "itemnumber": 123 + i ,"itemDescription": "Desc" +i , "priceclass" : "Class "+i}));
     i++;
   }
}

var ItemViewModel = function (data) {
  var _self = this;
  _self.manufacturer = data.manufacturer;
  _self.itemnumber = ko.observable(data.itemnumber);
  _self.itemDescription = data.itemDescription;
  _self.priceclass = data.priceclass;
}
 ko.applyBindings(MainViewModel);