title: How to link to each nested routes in ember?
body: <p>I've got an ember app where my routing looks like this:</p>
  
  <pre><code>App.Router.map(function() {
    this.resource('works', {path: '/works'}, function(){
      this.route('work', {path:':work_id'})
    });
  });
  </code></pre>
  
  <p>I want to be able to link each of my work in my index template, for my naviguation. I tried this but it didn't work:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name='application'&gt;
    &lt;header id="header"&gt;
      &lt;nav id="main-nav" role="navigation"&gt;
        &lt;div class="item-container"&gt;
          {{#link-to 'works' tagName='div' classNames="navItem work" }}
          &lt;p&gt;Works&lt;/p&gt;
          {{/link-to}}
          &lt;ul&gt;
            {{#link-to 'work' works work}}{{work.title}}{{/link-to}}
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;main id="main"&gt;
      {{outlet}}
    &lt;/main&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>If you need more info just let me know.</p>