title: Ember.js routing: how do you set a default route to render immediately?
body: <p>I'm sure this will become clear as I dig in deeper, but for now it's not obvious how to make this happen. </p>
  
  <p>I was following the info on <a href="https://stackoverflow.com/questions/11050956/ember-js-router-action-to-controller">this helpful SO article about routing</a> but there is an important piece missing from the example, i.e. how do you get the 'home' view to render right away without having to click the 'home' link?</p>
  
  <p>I've started digging into the docs to try to make sense of this, but meanwhile it seems like a useful question to have answered for posterity.</p>
  
  <p>I've been playing with the working jsfiddle example from the above question <a href="http://jsfiddle.net/rzNuZ/15/" rel="nofollow noreferrer">here</a> and comparing with this other example I found that <a href="http://jsfiddle.net/zdfs/qsAxZ/5/" rel="nofollow noreferrer">seems to have the default routing working</a></p>
  
  <p>So far it's still a mystery. </p>
  
  <p><strong>Current code</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
  
    root: Em.State.extend({
      // EVENTS
      goHome: Ember.State.transitionTo('home'),
      viewProfile: Ember.State.transitionTo('profile'),
  
      // STATES
      index: Em.State.extend({
          route: "/",
          redirectsTo: 'home'
      }),
  
      home: Em.State.extend({
          route: '/home',
          connectOutlets: function(router, context) {
              var appController = router.get('applicationController');
              appController.connectOutlet('home');
          }
      }),
  
      // STATES
      profile: Em.State.extend({
          route: '/profile',
              connectOutlets: function(router, context) {
                var appController = router.get('applicationController');
                appController.connectOutlet('profile');
              }
          }),
          doOne: function() {
              alert("eins");
          }
    }) 
  });
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE: Solution</strong></p>
  
  <p>It turns out that the reason the example I was working with was not working was because it was using <code>Em.State.extend</code> rather than <code>Em.Route.extend</code>. The interesting part is that as I step through and change them over one by one the example doesn't work until I change all of them over.</p>
  
  <p>Here is the working <a href="http://jsfiddle.net/fSgZS/" rel="nofollow noreferrer">example</a>:</p>
  
  <pre class="lang-js prettyprint-override"><code>App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
  
    root: Em.Route.extend({
      // EVENTS
      goHome: Ember.State.transitionTo('home'),
      viewProfile: Ember.State.transitionTo('profile'),
  
      // STATES
      index: Em.Route.extend({
          route: "/",
          redirectsTo: 'home'
      }),
  
      home: Em.Route.extend({
          route: '/home',
          connectOutlets: function(router, context) {
              var appController = router.get('applicationController');
              appController.connectOutlet({name: 'home'});
          }
      }),
  
      // STATES
      profile: Em.Route.extend({
          route: '/profile',
              connectOutlets: function(router, context) {
                var appController = router.get('applicationController');
                appController.connectOutlet('profile');
              }
          }),
          doOne: function() {
              alert("eins");
          }
    }) 
  });
  </code></pre>