Ember event for best discarding changes between same Route

Question

I have an Ember list and an edit form. Each time the selected item of the list changes the edit form discards any changes and loads new model.

My problem is that there is no way to discard changes because the deactivate event does NOT fire.

For example going from url/favs/123/edit to url/favs/456/edit deactivate (and exit) event does NOT fire. So there is no way to properly discard any changes.

Here is the part of my code I am referring to:

App.Router.map(function() {
    this.resource('favs', { path: '/favs' }, function() {
        this.route('new');
        this.route('edit', { path: ':fav_id/edit' })
    });
});

[...]

App.FavsEditRoute = Ember.Route.extend({
    deactivate: function() {
        var model = this.get('currentModel');
        if(model && model.get('isDirty')) {
            model.get('transaction').rollback();
        }
    },

    model: function(params) {
        return App.Fav.find(params.fav_id);
    },
});

Answer 1

I'd recommend using the willTransition route action. It currently appears to be advertised as the solution in the Ember Guide:

https://guides.emberjs.com/release/routing/preventing-and-retrying-transitions/

Aside from being in the public API, this approach has the advantage that you can prompt the user to confirm if they actually want to abandon the change, nullifying the transition if they say no.

For example:

App.FavsEditRoute = Ember.Route.extend({
  ...
  actions: {
    willTransition: function(transition) {
      controller = this.controllerFor('fav');
      if (controller.get('isDirty') &&
          !confirm("Are you sure you want to abandon progress?")) {
        transition.abort();
        return false;
      } else {
        controller.get("content").rollback();
        return true;
      }
    }
  }
});