How to Clone Models in Backbone

Question

I have a model which can be edited by a certain view; however, at the bottom of the view the user should get an option to save or discard all changes. This means that you will need to store a list of all the changes to be made to the model and then make those changes only once the 'save' button has been clicked. This sounds unnecessarily complicated and I have come up with an idea of an alternative approach which is to create a clone of the model and make changes to that in the view. Then if the user clicks 'save' delete the old model and replace it in its collection with the new one, otherwise you discard the cloned model.

This this an acceptable approach, and if so, how can I implement the cloning process?

This would be equivalent to fetching the data from the server again (but an extra HTTP request seems unnecessary).

Answer 1

You could use the clone method. Short example below:

var Model = Backbone.Model.extend({}); var View = Backbone.View.extend({     initialize: function() {         this.realModel = this.model;         this.model = this.realModel.clone();     },     onSave: function() {         this.realModel.set(this.model.attributes);     } }); 

You could also do something a bit different:

var Model = Backbone.Model.extend({}); var View = Backbone.View.extend({     initialize: function() {         // save the attributes up front, removing references         this._modelAttributes = _.extend({}, this.model.attributes);     },     onSave: function() {         // revert to initial state.         this.model.set(this._modelAttributes);     } });