TransitionTo and the new Ember Router

Question

The new ember router has been throwing me for a loop. Does anyone know how to manually triggering a url change when you are (1) NOT using a redirect in the router (2) NOT using the linkTo helper?

It seems that this:

App.container.lookup('router:main').router

no longer works, as of today's build.

Suellen

From where would you invoke the router ? – Hookworm

@Hookworm well, i'm basically trying to make ember play nicely with another javascript library, which draws all sorts of things onto the dom (very annoyingly). What I would like to do is to manually trigger a state change in the router on let's say, a click event on those inserted dom elements. – Suellen

So, you're in a view, which usually has a controller. As for today, you can call view.get('controller').transitionTo('state') – Hookworm

It looks like the best way to do this is to set up events and have the controller send the event. However I have the same problem as you. I'm working with a 3rd party library and I'm not sure how to reference the current controller/view in order to fire the events or trigger the transition. – Husbandman

Answer 1

This seems hard to do in new ember router because ember is working hard to prevent you writing code in this style. Rather than access an instance of the router (or anything else) via App your ember application code should be working with properties that have been injected at runtime by the framework. As @sly7_7 mentioned above, your view will have access to the controller and controller can trigger a transition like:

view.get('controller').transitionTo('state')

Depending on how your third party library is working, you might do this by triggering an event in the dom (handled by the view) or by registering a callback when the view is rendered from within didInsertElement

The main thing to remember is that App.anything-in-lowercase is generally bad practice. Whenever possible try to let the framework take care of instantiating and wiring together your application classes.

For more detail, see the notes on this commit: https://github.com/emberjs/ember.js/commit/5becdc4467573f80a5c5dbb51d97c6b9239714a8

Japonica

subsequent @sly7_7's remarks, i figured out how to wrap my templates in a view which would then respond to the browser events. i guess it's probably for the best if this is considered best practice. thanks! – Suellen

Answer 2

You can try this:

App.__container__.lookup('router:main').transitionTo('name_of_your_route');

Fivepenny