Ember: Get route instance from the controller

Question

I have a multi-step flow that the user can go through sequentially or jump straight to a section (if the sections in between are completed). I think this logic should be in the Route object. However, from within the controller, how do I access the route instance. For example, it would be ideal to be able to do something like this in the controller:

App.Flow = Em.ObjectController.extend({
  submit: function(){
    // Validation and XHR requests
    // ...

    // Go to the next step
    route.goToNextStep();
  }
}

score 41 · Accepted Answer · edited Oct 03 '18 at 00:14

From within a controller, you can access the router via this.get('target'). So this.get('target').send('goToNextStep') should work.

Like so:

App.Flow = Em.ObjectController.extend({
  submit: function(){
    // ...
    this.get('target').send('gotoNextStep');
  }
}

App.FlowRoute = Ember.Route.extend({
  events: {
    gotoNextStep: function(){
      // ...
      this.transitionTo(routeName);
    }
  }
}

score 2 · Answer 2 · answered Jul 04 '13 at 04:53

You need to get the route for such conditions, so from the controller just say,

App.Flow = Em.ObjectController.extend({
  submit: function(){
    var self =this;
    // Validation and XHR requests
    // ...

    // Go to the next step
    self.send('goToNextStep');
  }
}

and define your goToNextStep event in your route's event hash

score 0 · Answer 3 · answered Jul 03 '13 at 22:57

0

'this' is what points to the router, but you shouldn't add any methods to that prototype. Instead, make some sort of event that triggers the transition to the next step.

answered Jul 03 '13 at 22:57

ulisesrmzroche

145
8

Sorry, my example wasn't very clear. `this` in the example would point to the controller object. – Jeremy Gillick Jul 03 '13 at 22:58

score 0 · Answer 4 · answered Apr 24 '19 at 04:22

In addition to target, another way to do this in Ember now is with getOwner.

For example, to send an action to your application route:

import Component from '@ember/component';
import { action } from '@ember/object'; // https://github.com/pzuraq/ember-decorators-polyfill
import { getOwner } from '@ember/application';

export default class MyTopLevelComponent extends Component {
    @action
    closeModal() {
      getOwner(this).lookup('route:application').send('closeModal');
    }
});

Ember: Get route instance from the controller

4 Answers4