CODEWITHSUNDEEP
ember.jsember-router
Evan R.
Evan R.

Reputation: 3427

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

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

Upvotes: 10

Views: 16284

Answers (3)

CHsurfer
CHsurfer

Reputation: 1424

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

Upvotes: 9

Thomas Herrmann
Thomas Herrmann

Reputation: 245

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.

Upvotes: 4

Shane Davis
Shane Davis

Reputation: 952

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 :)

Upvotes: 1

Related Questions