Alertify not working with Ember transitions from route

Question

I am trying to use alertify confirmation box when someone tries to navigate from the page. But in the willTransition action of the route, alertify is very asynchronous, and ember doesn't wait for the confirmation. No matter what you click, the page is already navigated.

willTransition(transition) {
  alertify.confirm('Confirm', 'Are you sure you want to navigate?', function(e) {
    if(e) {
     return true;
    } else {
     transition.abort();
    }
  });
}

Please help me with this!!

Answer 1

You can abort and retry transitions. You have to abort the transition before showing the confirmation dialog. After confirming your dialog you can retry the transition and prevent your code from showing your confirmation dialog again. So the following should work (not tested):

export default Ember.Route.extend({

  // ...

  showConfirmation: true,

  actions: {
    willTransition(transition) {
      if(!this.get('showConfirmation')) {
        this.set('showConfirmation', true);
        return true;
      }
      // Abort the transition for now
      transition.abort();

      // Now show a confirm box with alertify.
      // According to the docs, only the following 
      // is allowed: http://alertifyjs.com/confirm.html

      alertify.confirm('Are you sure you want to navigate?', () => {   
        // According to the documentation of alertify, 
        // this code is only run when you confirm your box.
        this.set('showConfirmation', false);
        transition.retry();
      });
    }
  }
}