title: Child route not rendering on Ember
body: <p>I am obviously messing up something here, but I have a child route called 'details' that I want to render. However I keep getting error messages that 'details' does not exist.</p>
  
  <p>Here's my router map:</p>
  
  <pre><code>import Ember from 'ember';
  import config from './config/environment';
  
  var Router = Ember.Router.extend({
    location: config.locationType
  });
  
  export default Router.map(function() {
    this.resource('lists', {path: '/'}, function() {
      this.route('show', {path: 'lists/:list_id'} );
    });
    this.route('todo', {path: 'todos/:todo_id'}, function() {
      this.route('details');
    } );
  });
  </code></pre>
  
  <p>The link to details route:</p>
  
  <pre><code>&lt;div class="row"&gt;
      {{!div class="col-xs-12 col-xs-offset-5"}}
      {{!task list}}
          &lt;ul class="list-group"&gt;
              {{#each todo in model.todos itemController="todo"}}
  
                  {{#link-to "todo.details" todo}}
  
                  &lt;li class="list-group-item"&gt;
  ....
  </code></pre>
  
  <p>todo/details.hbs:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;div class="container-fluid"&gt;
  
          &lt;div class="row"&gt;
              &lt;h3&gt;{{todo.model.title}}&lt;/h3&gt;
  
  
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;li&gt;
                  &lt;p&gt;my name&lt;small&gt;timestamp&lt;/small&gt;&lt;/p&gt;
                  &lt;p class="bubble"&gt;yea&lt;/p&gt;
              &lt;/li&gt;
          &lt;/div&gt;
  
          {{outlet "comments"}}
  
      &lt;/div&gt;
  </code></pre>
  
  <p>todo/details.js:</p>
  
  <pre><code>export default Ember.Route.extend({
      renderTemplate: function() {
          this.render('comments', {
              into: 'details',
              outlet: 'comments'
          });
      }
  });
  </code></pre>
  
  <p>todo.js</p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Route.extend({
    model: function(params){
      // return model
    },
    renderTemplate: function(controller) {
      this.render('lists.show', {controller: controller});
  //    this.render('todos', {controller: 'todo'});
  
      this.render('todos', {
          into: 'lists.show',
          outlet: 'todos',
      });
  </code></pre>
  
  <p>I tried adding</p>
  
  <pre><code>this.render('todos.details', {
          into: 'todos',
          outlet: 'todos.details'
      });
  </code></pre>
  
  <p>to todo.js, but it would not work.</p>
  
  <p>If you could point me in the right direction I'd appreciate it.</p>