Emberjs (1.0rc1) nested routes, but display the default child route when the parent

Question

I have an ember application with a homepage that shows two links: "Sign in" and "Request an invitation."

Each link goes to a nested route under the parent route ( index ), rendering in the {{outlet}} index route. It works like this:

• / : maps index to the application folder
• /sign_in : displays index material and then displays index/sign_in in the output template template
• /request_invite : displays the index material and then maps index/request_invite to the output template template

This works fine, but I would like the default "sign in" template to be created, displayed in the index socket. So the first bullet above would change like this:

• / : maps index to {{outlet}} and maps index/sign_in to the output template template

Patterns

 <script type="text/x-handlebars" data-template-name="application"> <h1>application</h1> {{#linkTo "index"}}index{{/linkTo}} {{outlet}} </script> <script type="text/x-handlebars" data-template-name='index'> <h2>index</h2> {{#linkTo "index.sign_in"}}Sign in{{/linkTo}} | {{#linkTo "index.request_invite"}}Request Invite{{/linkTo}} {{outlet}} </script> <script type="text/x-handlebars" data-template-name='index/sign_in'> <h3>index/sign_in</h3> </script> <script type="text/x-handlebars" data-template-name='index/request_invite'> <h3>index/request_invite</h3> </script> 

<strong> routes

 App = Ember.Application.create(); App.Router.map(function() { this.resource("index", function() { this.route("sign_in"); this.route("request_invite"); }); }); 

Here is jsbin with the above code .

At the first boot, it does not display the index/sign_in or index/request_invite template. I would show that the default index/sign_in template.

Answer 1

You can explicitly declare IndexRoute and implement redirection:

 App.IndexRoute = Ember.Route.extend({ redirect : function(){ this.transitionTo("index.sign_in"); } }); 

Update: using a route with a different name and index ( JS Bin Link )

 App = Ember.Application.create(); App.Router.map(function() { this.resource("main", function() { this.route("sign_in"); this.route("request_invite"); }); }); App.IndexRoute = Ember.Route.extend({ redirect : function(){ this.transitionTo("main"); } }) App.MainIndexRoute = Ember.Route.extend({ redirect : function(){ this.transitionTo("main.sign_in"); } });