Alex Rivera | Logout

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

Asked 2013-01-06T19:54:34.063
10

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 ember-router

Edit
Report

1 Answer

4

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.

answered 2013-01-07T08:36:08.757

Your Answer