emberjs (1.0rc1) nested routes but render default child route when at parent

Question

I have an ember app with a home page showing two links: 'sign in' and 'request invite'.

Each link goes to a nested route under the parent (index) route, rendering into the {{outlet}} of the index route. It is working like so:

/: renders index into application outlet
/sign_in: renders index stuff then renders index/sign_in into index template's outlet
/request_invite: renders index stuff then renders index/request_invite into index template's outlet

This works fine, but what I'd like to do is have the 'sign in' template rendered into the index outlet by default. So the first bullet above would change to be like so:

/: renders index into the {{outlet}} and renders index/sign_in into index template's outlet

templates

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

routes

App = Ember.Application.create();

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

Here is a jsbin with the above code.

When it first loads it doesn't display the index/sign_in or index/request_invite template. I'd to show that index/sign_in template by default.

mavilein mavilein · Accepted Answer · 2013-03-12T16:01:07

You could declare the IndexRoute explicitly and implement the redirect hook:

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

Update: Using a Route other named then 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");
  }
});

emberjs (1.0rc1) nested routes but render default child route when at parent

1 Answers