Revert model changes without Ember-Data

Question

I have a model created from a JSON object that has many properties bound to the UI (a preferences panel). I would like to allow the user to update their preferences, but I also need a way for them to revert their changes to the model after they've made changes to the UI.

I see many examples using Ember-Data, but we're not using that; Nor do I see any obvious pattern/methods in the Ember docs. Is there a commonly used pattern to achieve 'rollback' on a model without Ember-Data?

Answer 1

It really depends on how your models are structured. I wrote my own Ember persistence library and I made every property a computed property (like Ember-Data). From there, I had two hashes in each model, oldProperties and newProperties. I use the two in tandem to read, and only write to newProperties. That way I can always restore to oldProperties if necessary.

The bottom line is that Ember itself doesn't store old property values for you. You'll have write your own custom logic to store the old values and restore them when you need.

Answer 2

Something that worked for me is to clone the model and then revert back to the cloned version if the user cancels the edit.

In the route

listEditController.set('clonedModelContent', Ember.copy(modelContent));

Then in the controller's cancel action:

close: function () {
  Ember.setProperties(@get('model'), @get('clonedModelContent'));
  // navigate somewhere else
}

The pattern could be reverted in case you don't want to modify the model until the changes are 'accepted'. In that case, you set the clone to the controller's property, and when you save then copy the properties and cancel would simply navigate away, essentially discarding the changes in the cloned object.

Hope this helps.

Answer 3

I like to use the rollbackAttributes() method on the model.

import Ember from 'ember';

export default Ember.Component.extend({
actions: {        
    cancelEdit: function() {
        var model = this.get('objectBeingEdited');
        model.rollbackAttributes();
        this.toggleProperty('isEditing');
        }
    }
});