Ember.js: How can I prevent transition on dirty model with async confirmation?

Question

I have a pretty common situation: there is a dirty model and I want to show a confirmation if user tries to transition to any other route.

I have something like this to work with window.confirm confirmation dialog:

var EventRoute = Ember.Route.extend({
  actions: {
    willTransition: function(transition) {
      var event = this.modelFor(this.routeName);
      if (event.get('isDirty') && !confirm("Are you sure?")) {
        transition.abort();
      } else {
        event.rollback();
        return true;
      }
    }
  }
});

But if I want to use asynchronous confirmation (e.g. bootbox.js confirmation), how can I stop transition?

I've tried to return Ember.RSVP.Promise but it seems that willTransition doesn't support promises.

So the question is how is it possible to prevent transition to another route with async confirmation?

On an unrelated note, you should not call your variables "event", and doubly so if they're not representing an event. — Tomalak, May 18 '14 at 17:03

Kingpin2k · Accepted Answer · 2014-05-18T17:19:27.233

You can use abort to cancel/pause the transition, then with that same transition instance you can call retry to attempt the transition again.

In the example included I'm stopping the transition, then a second later starting it again. You could launch your confirmation dialog and upon clicking ok/cancel use the transition object to continue the transition.

willTransition: function(transition){
  var self = this;
  if(!this.get('allowTransition')){
    console.log('transition abort');
    transition.abort(); 

    Em.run.later(function(){
      self.set('allowTransition', true);
      console.log('transition retry');
      transition.retry();
   }, 1000);
 }

http://emberjs.jsbin.com/gefituqo/1/edit

Nice trick! (: Well, if there're no cleaner solution for this, then I'll use it. Thanks — Anthony Hell, May 18 '14 at 20:05

Ember.js: How can I prevent transition on dirty model with async confirmation?

1 Answers1