How to programmatically transition between routes using Ember.js' new Router

Question

Question:

How do you do programmatically transition to a new route using the new Ember.js Router?

Background / Context

With the old Ember.js Router you could programmatically transition between routes/states using the router's send method:

//OLD Router Syntax
App = Ember.Application.create({
  Router: Ember.Router.extend({
    root: Ember.Route.extend({
      aRoute: Ember.Route.extend({
        route: '/',
        moveElsewhere: Ember.Route.transitionTo('bRoute')
      }),
      bRoute: Ember.Route.extend({
        route: '/someOtherLocation'
      })
    })
  })
});
App.initialize();

Programatic Transition:

App.get('router').send('moveElsewhere');

Given the new Ember.js Router (below) how do we accomplish the same thing?

//NEW Router Syntax
App.Router.map(function(match) {
  match('/').to('aRoute');
  match('/someOtherLocation').to('bRoute');
});

Work Around (Bad Solution?)

this can't be right, right?:

window.location = window.location.href + "#/someOtherLocation";

Solutions that don't seem to work with the New Router:

1) calling the send method on the App.router instance

> App.router.send("moveElseWhere")
TypeError: Cannot call method 'send' of undefined

2) Explicitly declaring the Route and setting an event

App.ARoute = Ember.Route.extend({
  events: {
    moveElseWhere: function(context){
       this.transitionTo('bRoute');
    }
  }
);

App.UploadRoute.moveElseWhere()
TypeError: Object (subclass of Ember.Route) has no method 'moveElseWhere'

---

Note: At time of writing the Ember.js Router documentation still refers to the Old Router, where as the Ember.js Router guide refers to the new Router

Solution 1

Assuming this Router definition:

App.Router.map ->
  this.resource('old_route', {path : ""})
  this.resource('new_route', {path : ":model_id"})

you can move to the new_route with the old_route.transitionToRoute() function when you have the controller as the context.

From the controller

this.get('target').transitionToRoute('new_route', model_instance)

this.get('target') - returns the current route from the controller

From a view

this.get('controller').get('target').transitionToRoute('activity_detail', activity)

Note

The function *transitionTo() has been deprecated in 1.0.0.RC3

Solution 2

You can use transitionTo with the new router API, but you have to access the router instance differently.

See the answer of question Access instance of new Ember Router for the possibilities.

Solution 3

you trigger a link to a new route with the {{linkTo}} helper:

#your template

{{#linkTo allTodos activeClass="selected"}}All{{/linkTo}}

#your router

    App.Router.map(function (match) {
        match("/").to("todos", function (match) {
            match("/").to("allTodos"); // will fire this router
            match("/active").to("activeTodos");
            match("/completed").to("completedTodos");
        });
    });

Hope this helps :)