Ember.js: transitionTo route, then to dynamic segment

Question

I have a Router set up with accounts, and account/:account_id options. When the user lands on the index page of my app I transition them to the accounts route.

Social.Router.map(function() {
    this.resource('accounts', function(){
        this.resource('account', { path: ':account_id'});
    });
});

Social.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('accounts');
    }
});

What I'd like to do is to transition them to a specified :account_id route based on some criteria. At the moment I just want to get the first account in the array and use that. But in the future it could be a way to transition them to the last account they were viewing. Something like this:

Social.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('accounts/:account_id');
    }
});

The docs give "detail" but don't provide an example, only offering the following:

transitionTo (name, models)

Transition into another route. Optionally supply a model for the route in question. The model will be serialized into the URL using the serialize hook.

I've tried the following:

this.transitionTo('accounts/4');
Uncaught Error: assertion failed: The route accounts/4 was not found

this.transitionTo('accounts', Social.Account.find(1));
Uncaught More objects were passed than dynamic segments

Answer 1

I put together others' answers and some fiddling and came out with this answer:

define your routes like:

this.resource('accounts', function () {
    this.route('account', {path: '/:account_id'});
});

redirect:

this.transitionTo('accounts.account', accountObj);

But if you are loading from server, you need the accountObj object loaded before redirect:

var accountObj = App.Account.find(1);
accountObj.one('didLoad', this, function () {
    this.transitionTo('accounts.account', accountObj);
});

I set up this fiddle with complete example

Answer 2

It looks like transitionTo is deprecated in favor of transitionToRoute.

Nonetheless you can achieve the reroute by having the original declaration be this.resource('account', { path: '/:account_id'}); and then the transition with the single created object should work.

Answer 3

You are not specifying the route path properly and you should have a route under the resource, not another resource. It should be like this:

Social.Router.map(function() {
    this.resource('accounts', function(){
        this.route('account', { path: '/:account_id'});
    });
});

Social.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('accounts.account', Social.Account.find(1));
    }
});

Answer 4

With latest Ember (1.0.0-RC-6), this works perfectly.

Router:

this.resource('accounts', function () {
    this.resource('account', {path: '/:account_id'});
});

To redirect:

this.transitionToRoute('account', Social.Account.find(1))

Answer 5

As your /:account_id is a resource you need to transitionToRoute 'account'. You also need an AccountRoute accordingly.

If /:account_id was a route not a resource you would transitionToRoute 'accounts.account' and your route handler would be called AccountsAccountRoute.