Updating array mapped via the knockout mapping plugin replaces the contents of the array

Question

I have an object in my view model that gets updated with array data from the server using the mapping plugin.

Contents of the mapped observable array are displayed in a table. Now, the user has the capability to 'load more', which triggers a request to the server and gets the next 'n' rows of data from the server.

Updating the view model object using the mapping plugin with new data causes the existing data to be replaced. My goal is to make the mapping plugin append the new data to the existing observable array.

Wondering if this is possible using a custom 'create' or an 'update' callback? If yes, some examples would really help.

For now, as a workaround - I've resorted to manually pushing data into the view model object.

Answer 1

you could push it instead of reassigning it:

if your observable array is self.displayedData then, in your ajax success, instead of ko.mapping.fromJS(data, self.displayedData) you could do something like

$(data).each(function(i,e){
  self.displayedData.push(ko.mapping.toJS(e));
});