Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get current route name in Ember

Tags:

ember.js

I need to get the current route name in my ember application; I tried this: Ember App.Router.router.currentState undefined but it doesn't work for me (there is probablig something i'm missimg...) I use Ember rc6 and I have a multilingual app; in the applicationRoute I detect the browser's language and I redirect to the correct page with:

this.transitionTo(userLang);

but I would like this to be executed only when user are on the home page, so something like this:

if (currentRoute == 'home'){
  this.transitionTo(userLang)
}
like image 329
Cereal Killer Avatar asked Aug 18 '13 18:08

Cereal Killer


3 Answers

This worked for me on 1.3.0-beta (and a quick glance at the source for 1.1.2 suggests it would work there too):

App.__container__.lookup('router:main').location.lastSetURL

Note that the documentation states:

At present, it relies on a hashchange event existing in the browser.

However, I believe it's strongly suggested that App.__container__ not be used in production code. A more acceptable alternative would be to use App.Router.router.currentHandlerInfos, which provides information on the current Ember route.

Yet another option is currentRouteName on the ApplicationController. You can add needs: ['application'] to your controller, then access the route name with controllers.application.currentRouteName. This will return something like posts.index.

like image 141
Linda Avatar answered Oct 16 '22 02:10

Linda


NOTE: as of Ember 3.16, the original answer is not only recommended, but observers are strongly discouraged.

To get the current route name, you can utilize the Router Service: https://api.emberjs.com/ember/3.18/classes/RouterService/properties/currentRouteName?anchor=currentRouteName

export default class MyComponent extends Component {
  @service router;

  get activeRoute() {
    return this.router.currentRouteName;
  }
}

Original answer below


You could observe the application's currentPath and set it to the current route accordingly when it changes:

App = Ember.Application.create({
  currentPath: '',
});

App.ApplicationController = Ember.Controller.extend({
  updateCurrentPath: function() {
    App.set('currentPath', this.get('currentPath'));
  }.observes('currentPath')
}),

This way you have access to the currentPath when ever you want with App.get('currentPath');

E.g.

if (App.get('currentPath') == 'home'){
  this.transitionTo(userLang);
}

Hope it helps.

like image 39
intuitivepixel Avatar answered Oct 16 '22 04:10

intuitivepixel


With the shift to components, it is harder to get route name. The best way is to add an initializer such as

ember g initializer router

(from command line), and

export function initialize(application) {
  application.inject('route', 'router', 'router:main');
  application.inject('component', 'router', 'router:main');
}

export default {
  name: 'router',
  initialize
};

in a initializers/router.js. You can also inject into controller if you need to. Then just do simply

this.get('router.currentRouteName');

in JS, or

{{router.currentRouteName}}

in template.

This is the only way I have found to get it reliably, and observable in Ember 2.4

like image 42
Xeridea Avatar answered Oct 16 '22 03:10

Xeridea