Switching to another route when accessing the top resource, but not when accessing the nested route

Question

I defined the following route:

SettingsApp.Router.map(function () { .... this.resource('profile', function () { this.route('user'), this.route('company') }); }); SettingsApp.ProfileRoute = Ember.Route.extend({ redirect: function () { this.transitionTo('profile.user'); }, model: function () { return Ember.A([ Ember.Object.create({title:"User", link:"#/profile/user"}), Ember.Object.create({title:"Company", link:"#/profile/company"}) ]); } }) 

#/profile , as expected, is redirected to #/profile/user , but the problem is that #/profile/company also redirected to #/profile/user . Resource redirection seems to be done when I access any url below this resource.

Why is this? How can I redirect only the top level #/profile ?

Answer 1

You can move redirect() to the profile reource index , ProfileIndexRoute , which will only ProfileIndexRoute it if you go to #/profile and allow access to #/profile/user and #/profile/company without problems:

 SettingsApp.Router.map(function () { this.resource('profile', function () { this.route('user'); this.route('company'); }); }); SettingsApp.ProfileRoute = Ember.Route.extend({ //redirect: function () { // this.transitionTo('profile.user'); //}, model: function () { return Ember.A([ Ember.Object.create({title:"User", link:"#/profile/user"}), Ember.Object.create({title:"Company", link:"#/profile/company"}) ]); } }); SettingsApp.ProfileIndexRoute = Ember.Route.extend({ redirect: function () { this.transitionTo('profile.user'); }, }); 

JSBin example

Hint: set LOG_TRANSITIONS: true to Application to show which routes are through the router. This is very useful for debugging issues like this.

 SettingsApp = Ember.Application.create({ LOG_TRANSITIONS: true }); 

Answer 2

redirect redirect is hard forwarding, which means that no matter what nested routes / resources you have, it will always be redirected to profile.user . To have a different behavior, you must remove the redirect hook and provide links from the parent template or navigation to your sub-resources, for example.

 {{#linkTo profile.user}}User{{/linkTo}} {{#linkTo profile.company}}Company{{/linkTo}} 

This will create the following HTML markup:

 <a href="/user">User</a> <a href="/company">Company</a> 

And in case you want to transfer the model during the transition along the route, you can in the settings of your template:

 {{#linkTo profile.user user}}User{{/linkTo}} {{#linkTo profile.company company}}Company{{/linkTo}} 

In case you pass the model, you need to change the router card accordingly:

 SettingsApp.Router.map(function () { .... this.resource('profile', function () { this.route('user', { path: "/user/:user_id" }), this.route('company', { path: "/company/:company_id" }) }); }); 

This will create the following HTML markup:

 <a href="/profile/user/1">User</a> <a href="/profile/company/1">Company</a> 

And finally, if you redirect to profile.user or profile.company , you will also need templates for these routes.

Hope this helps.