title: How do I add Projects parent to Ember-CLI TodoMVC?
body: <p>I am working on a todo type project using Ember-CLI.  I used as a starting point the nifty todoMVC project, but built with Ember-CLI using this guide: </p>
  
  <p><a href="http://blaketv.com/2014/10/03/ember-cli-todo-mvc-tutorial-0-0-47//" rel="nofollow">http://blaketv.com/2014/10/03/ember-cli-todo-mvc-tutorial-0-0-47//</a></p>
  
  <p>My question is, how would I go about adding projects at the parent level. So we would have a master-detail type interface and in the sidebar we would have projects and you could CRUD project names, and then when you click on a project name, you see the todos in the detail pane.  </p>
  
  <p>I have gotten far enough defining the hasMany relationships to the models, but I cannot figure out if I need multiple {{outlets}} It is very difficult to get everything on the same page and working. </p>
  
  <p>Here is my model for project:</p>
  
  <pre><code>export default DS.Model.extend({
    title: DS.attr('string'),
    isCompleted: DS.attr('boolean'),
    description: DS.attr('string'),
    todos: DS.hasMany('todo', {async: true})
  });
  </code></pre>
  
  <p>and model for todos:</p>
  
  <pre><code>import DS from 'ember-data';
  
  export default DS.Model.extend({
    title: DS.attr('string'),
    isCompleted: DS.attr('boolean')
  });
  </code></pre>
  
  <p>and the main Router:</p>
  
  <pre><code>Router.map(function() {
    this.resource('projects', function () {
      this.route('new'); 
      this.resource('project', { path: ':id' }, function () {
        this.route('todos');
      });
    });
  });
  </code></pre>
  
  <p>Project Route:</p>
  
  <pre><code>export default Ember.Route.extend({
    model: function(params) {
      return this.store.find('project', params.id);
    }
  });
  </code></pre>
  
  <p>Index Route:</p>
  
  <pre><code>export default Ember.Route.extend({
    model: function() {
      return this.store.find('project');
    }
  });
  </code></pre>
  
  <p>Todos Route:</p>
  
  <pre><code>export default Ember.Route.extend({
    model: function() {
      return this.modelFor('todos');
    }
  });
  </code></pre>
  
  <p>So for project.hbs this is where it gets tricky. I create the sidebar with bootsrap and then this outlet shows the todos....</p>
  
  <pre><code>&lt;div class="projects-column col-md-3"&gt;
    &lt;div id="inbox-header"&gt;&lt;span class="glyphicon glyphicon-inbox"&gt;&lt;/span&gt; Inbox &lt;span class="badge"&gt;42&lt;/span&gt;&lt;/div&gt;
    &lt;div id="projects-header"&gt;&lt;span class="glyphicon glyphicon-list-alt"&gt;&lt;/span&gt; Projects&lt;/div&gt;
    &lt;div id="forecast-header"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt; Forecast&lt;/div&gt;
    &lt;div id="log-header"&gt;&lt;span class="glyphicon glyphicon-book"&gt;&lt;/span&gt; Sessions Log&lt;/div&gt;
  &lt;/div&gt;
    &lt;div&gt;{{outlet}}&lt;/div&gt;
  </code></pre>
  
  <p>Index.hbs:</p>
  
  <pre><code>&lt;ul&gt;
    {{#each model}}
    &lt;li&gt;{{link-to title "project.todos" this}}&lt;/li&gt;
   {{/each}}
  </code></pre>
  
  <p></p>
  
  <p>So this above when you click on the project title link, it shows the associated todos.... but it renders in the left pane... it's probably just something about the CSS layout...but something tells me there is a very Ember-ish way to do this that I am missing.</p>
  
  <p>Then in <code>/project/todo.hbs</code> we have the iteration</p>
  
  <pre><code>{{#each model.todos}}
      &lt;li&gt;{{title}}&lt;/li&gt;
  {{/each}}
  </code></pre>
  
  <p>I haven't even really addressed making the CRUD for controllers or anything.  Most likely this above is laughable and there is a much more elegant way to approach this...  </p>
  
  <p>Basically I want a projects parent route, that I do CRUD with... and then when you render a list of project links in the sidebard and click on one, you get in the right pane the rendered ToDoMVC working app.  </p>
  
  <p>Of course this is just a starting point for my application. Most likely if someone comes up with a elegant way to do this, we can turn it into an open source project on github for others to learn from.</p>
  
  <p>I think a bunch of burgeoning ember developers are having a hard time with this type of thing because of the multiple ways to do it (outlets, partials, render, render into other templates, views, components, etc)</p>
  
  <p>Don't really know how to get any further.</p>