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

回答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

回答2:

I'm not aware of a short like Ember.Route.transitionTo() for now. For having the same behavior, you can define an events object inside a route, and then call route.transitionTo().

Given your example, this should be something like:

UPDATE Since this commit: https://github.com/emberjs/ember.js/commit/6dab9beccf4a2ae700633dfd4811018e0bea5028 the context for the events is the route itself.

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

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

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/14186092/how-to-programmatically-transition-between-routes-using-ember-js-new-router

标签

ember.js

ember-router