title: ember 2.0 nested dynamic templates renders the wrong template
body: <p>Others have posted similar problems on stackoverflow, but no answers yet...</p>
  
  <p>My first dynamic route works. I have a nested dynamic route inside the first dynamic route, but the template of that nested route is never displayed.</p>
  
  <p>This route works (the post.hbs is displayed):</p>
  
  <pre><code>#/home/post/29
  </code></pre>
  
  <p>But for this route:</p>
  
  <pre><code>#/home/post/29/comment/123
  </code></pre>
  
  <p>I expect the comment.hbs to display, but the post.hbs is still displayed.</p>
  
  <p>My router looks like:</p>
  
  <pre><code>this.route('home', { path: '/home'}, function() {
      this.route('post', {path: "/post/:post_id"}, function() {
          this.route('comment', {path: "/comment/:comment_id"}, function() {
          ....
  </code></pre>
  
  <p>In my post.hbs I have this:</p>
  
  <pre><code>&lt;div {{action 'doNavigateToComment' comment}}&gt;
  </code></pre>
  
  <p>In my route\home\post.js I have:</p>
  
  <pre><code>doNavigateToComment(comment_id) {
    this.transitionTo('home.post.comment', this.get('postId'), comment_id);
  }
  </code></pre>
  
  <p>My filestructure looks like this:</p>
  
  <pre><code>\routes
    home.js
    \home
      post.js
      \post
        comment.js
  \templates
    \home
      index.hbs
      post.hbs
      post\
        comment.hbs
  </code></pre>
  
  <p>Tracing is turned on in the console, but it shows no error.</p>
  
  <p>I am using ember 1.13.5 (which shall behave like ember 2.0)</p>