Emberjs abort transition and show modal

Question

I want to abort transition on a particular route and show a modal. This is how my route code looks like:

export default Ember.Route.extend({
  model: {/* some code here */},
  actions: {
    willTransition: function(transition) {
      if (!this.controller.get('model.name')) {
        console.log('aborting transition');
        transition.abort();
        this.send('showModal', {
          template: 'campaign/campaign-name-modal',
          controller: this.controller,
          model: this.controller.get('model')
        });
      }
      else {
        // Bubble the `willTransition` action so that
        // parent routes can decide whether or not to abort.
        return true;
      }
    }
  }
});

and then in my application.hbs, I have:

{{outlet 'modal'}}

What I am observing is that transition aborts but my modal doesn't show up. When I switch the ordering to something like:

    this.send('showModal', {
      template: 'campaign/campaign-name-modal',
      controller: this.controller,
      model: this.controller.get('model')
    });
    console.log('aborting transition');
    transition.abort();

the transition doesn't abort at all.

I am not exactly sure why this might be happening. Any pointers?

Tica

In the second code, are you getting the console log 'aborting transition'? – Chrissa

Answer 1

Maybe try editing your conditional to use firstObject:

if (!this.controller.get('model.firstObject.name')) {

Courtnay

The conditional is not the issue. Execution goes inside the if block and then misbehaves. – Tica

I assume you're getting the console message 'aborting transition' without the transition aborting. What version of Ember are you using? – Courtnay