ReefPointsBlog

A Simple Ember Data Route

Brian Cardarella

When working with an Ember Data model it is easy to forget to properly handle the teardown of that model. For example, if you are creating a new model and the user hits the backbutton that model is still in the local store. Or if a user edits a model and decides to click the Cancel button or clicks a link that transitions out of this route without saving the model. A basic approach can be as simple as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ember.DSModelRoute = Ember.Route.extend({
  deactivate: function() {
    var model = this.get('controller.model');
    model.rollback();
    if (model.get('isNew')) {
      model.deleteRecord();
    }
  },
  actions: {
    willTransition: function(transition) {
      var model = this.get('controller.model');
      if (model.get('isDirty') && !confirm('You have unsaved changes. They will be lost if you continue!')) {
        transition.abort();
      }
    }
  }
});

Routes inherited from Ember.DSModelRoute will always clean up after themselves. If the user has unsaved changes and attempts to leave the current route the app will guard against the transition and allow the user to confirm with a notice that changes will be lost.