title: How to work with nested routes in Ember.js
body: <p>I'm new to Ember.js and I stuck with nested routes and I need help.</p>
  
  <p>This is what I want to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/K58DD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K58DD.png" alt="enter image description here"></a></p>
  
  <p>I think this is called Master-Detail page.</p>
  
  <p>more systematically it looks something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/e9TKR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e9TKR.png" alt="enter image description here"></a></p>
  
  <p><strong>UsersIndexRoute</strong> displays list of people.
  <strong>UsersShowRoute</strong> displays information for particular person.</p>
  
  <p>Here is my routes:</p>
  
  <pre><code>Router.map(function() {
    this.route('users', { path: '/users'}, function() {
      this.route('index', { path: ''}, function() {
        this.route('show', { path: '/:id' });
      });
    });
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NJtIn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NJtIn.png" alt="enter image description here"></a></p>
  
  <p>UserIndex Template looks like this:</p>
  
  <pre><code>{{#each item in model}}
    {{#link-to 'users.index.show' item.id}} {{item.firstName}} {{item.lastName}}{{/link-to}}
  {{/each}}
  </code></pre>
  
  <p>When I try URL like '<a href="http://localhost:4200/users/1" rel="nofollow noreferrer">http://localhost:4200/users/1</a>' for example, according to debugger I am be able to reach controller 'users.index.show' (the desired one)</p>
  
  <p><a href="https://i.stack.imgur.com/jfgOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jfgOe.png" alt="enter image description here"></a> </p>
  
  <p>The route for <strong>UserShowRoute</strong> looks like this:</p>
  
  <pre><code>export default Ember.Route.extend({
    renderTemplate: function() {
      this.render({
        outlet: 'detail'
      });
    },
    model: function(params) {
      return this.store.find('user', params.id);
    } 
  });
  </code></pre>
  
  <p>I am using ember-cli 1.13.8</p>
  
  <p>I hope my explanation makes some sense to you.
  Thanks in advance.</p>