title: Emberjs not working when using url directly
body: <p>I'm new to EmberJs and was following <a href="https://github.com/ahawkins/hawkins.io/blob/7c8f0984060a19611010eeb3d2963099c7b1f2e1/blog/_posts/2013-03-29-master-detail-views-with-ember.md" rel="nofollow">this</a> post from Adam Hawkins. When I tried to run this in a browser it seems to work but not as expected. when I click a dj in the navigation bar (data-template-name="djs") the browser navigates to the detail of the choosen dj and shows me all his albums. e.g. embertest/index.html#/djs/djs/armin-van-buuren</p>
  
  <p>But if I paste the url (embertest/index.html#/djs/djs/armin-van-buuren) directly in the browser without clicking a dj first in the navigation list I get the message "No Albums" from the handlebars template "djs/dj"</p>
  
  <p>I would expect the same behavior in both scenario's. What am I missing here?</p>
  
  <p>For completeness you can find my ember application and handlebar templates below.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var App = Ember.Application.create(
  {   LOG_TRANSITIONS: true,
      LOG_BINDINGS: true,
      LOG_VIEW_LOOKUPS: true,
      LOG_STACKTRACE_ON_DEPRECATION: true,
      LOG_VERSION: true,
      debugMode: true
  });
  
  window.App = App;
  
  App.DJS = [
    { 
      name: 'Armin van Buuren',
      albums: [
        { 
          name: 'A State of Trance 2006',
          cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/87/ASOT_2006_cover.jpg/220px-ASOT_2006_cover.jpg'
        },
        { 
          name: '76',
          cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/8a/Armin_van_Buuren-76.jpg/220px-Armin_van_Buuren-76.jpg'
        },
        { 
          name: 'Shivers',
          cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/a/a1/ArminvanBuuren_Shivers.png/220px-ArminvanBuuren_Shivers.png'
        }
      ]
    },
    { 
      name: 'Markus Schulz',
      albums: [
        {
          name: 'Without You Near',
          cover: 'http://upload.wikimedia.org/wikipedia/en/9/92/Markus_Schulz_Without_You_Near_album_cover.jpg'
        },
        { 
          name: 'Progression',
          cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/81/Markus-schulz-progression_cover.jpg/220px-Markus-schulz-progression_cover.jpg',
        },
        { 
          name: 'Do You Dream?',
          cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/9/92/Doyoudream.jpg/220px-Doyoudream.jpg',
        }
      ]
    },
    { 
      name: 'Christopher Lawrence',
      albums: [
        {
          name: 'All or Nothing',
          cover: 'http://s.discogss.com/image/R-308090-1284903399.jpeg',
        },
        { 
          name: 'Un-Hooked: The Hook Sessions',
          cover: 'http://s.discogss.com/image/R-361463-1108759542.jpg'
        }
      ]
    },
    { 
      name: 'Above &amp; Beyond',
      albums: [
        {
          name: 'Group Therapy',
          cover: 'http://s.discogss.com/image/R-2920505-1345851845-3738.jpeg'
        },
        { 
          name: 'Tri-State',
          cover: 'http://s.discogss.com/image/R-634211-1141297400.jpeg',
        },
        { 
          name: 'Tri-State Remixed',
          cover: 'http://s.discogss.com/image/R-1206917-1200735829.jpeg'
        }
      ]
    }
  ];
  
  App.Router.map(function() {
    this.resource('djs', function() {
      this.route('dj', { path: '/djs/:name' });
    });
  });
  
  App.IndexRoute = Ember.Route.extend({
    redirect: function() {
      this.transitionTo('djs');
    }
  });
  
  App.DjsRoute = Ember.Route.extend({
    model: function() {
      return App.DJS;
    }
  });
  
  App.DjsDjRoute = Ember.Route.extend({
    serialize: function(dj) {
      return {
        name: dj.name.dasherize()
      }
    }
  });
  </code></pre>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!-- application template --&gt;
  &lt;script type="text/x-handlebars"&gt;
    &lt;div class="navbar navbar-static-top"&gt;
      &lt;div class="navbar-inner"&gt;
        {{#linkTo 'djs' class="brand"}}On The Decks{{/linkTo}}
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
        {{outlet}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="djs"&gt;
    &lt;div class="span2"&gt;
      &lt;ul class="nav nav-list"&gt;
        {{#each controller}}
          &lt;li&gt;{{#linkTo 'djs.dj' this}}{{name}}{{/linkTo}}
        {{/each}}
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="span8"&gt;
      {{outlet}}
    &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="djs/dj"&gt;
    &lt;h2&gt;{{name}}&lt;/h2&gt;
  
    &lt;h3&gt;Albums&lt;/h3&gt;
  
    {{#if albums}}
      &lt;ul class="thumbnails"&gt;
        {{#each albums}}
          &lt;li&gt;
            &lt;div class="thumbnail"&gt;
              &lt;img {{bindAttr src="cover" alt="name"}} /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        {{/each}}
    {{else}}
      &lt;p&gt;No Albums&lt;/p&gt;
    {{/if}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="djs/index"&gt;
    &lt;p class="well"&gt;Please Select a DJ&lt;/p&gt;
  &lt;/script&gt;
  
  &lt;script src="js/libs/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="js/libs/handlebars-1.0.0.js"&gt;&lt;/script&gt;
  &lt;script src="js/libs/ember-1.0.0.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>