如何爲列表/單個項目模板配置Ember路由？

Question

我想要在頁面頂部的表中列出項目。當用戶點擊表格中的其中一個項目時，該項目應該呈現在表格下方。這裏是我的事情列表HBS的樣子：

<script type="text/x-handlebars" data-template-name="things"> 
    <div class="page-header"> 
     <h1>My Things</h1> 
    </div> 
    <table> 
     <thead> 
     <tr> 
     <th>prop1</th> 
     <th>pro2</th> 
     </tr> 
     </thead> 
     {{#each thing controller}} 
     <tr> 
      <td>{{#linkTo "thing" thing}}{{ thing.prop1 }}{{/linkTo}}</td> 
      <td>{{ thing.prop2 }}</td> 
      <td>{{ thing.prop3 }}</td> 
     </tr> 
     {{/each}} 
    </table> 
    </div> 
    <div> 
    {{render "thing"}} 
    </div> 
</script> 

如果我使用linkTo，我得到的錯誤：

You can only use the {{render}} helper once without a model object as its second argument, as in {{render "post" post}}.

有趣的是，我可以瀏覽的網址（即../ ＃/東西/ 1），並呈現罰款。這裏是我的路由圖：

App.Router.map(function(){ //map URLs to templates 
    this.resource('things', function(){ 
     this.resource('thing', {path: ':thing_id'}); 
    }); //maps to /#/contacts 
    //define all other URLs in application 
}); 

我在想什麼？

Answer 1

好的，我想通了。 HBS中的{{render "thing"}}應替換爲{{outlet}}，因此：

<script type="text/x-handlebars" data-template-name="things"> 
    <div class="page-header"> 
     <h1>My Things</h1> 
    </div> 
    <table> 
     <thead> 
     <tr> 
     <th>prop1</th> 
     <th>pro2</th> 
     </tr> 
     </thead> 
     {{#each thing controller}} 
     <tr> 
      <td>{{#linkTo "thing" thing}}{{ thing.prop1 }}{{/linkTo}}</td> 
      <td>{{ thing.prop2 }}</td> 
      <td>{{ thing.prop3 }}</td> 
     </tr> 
     {{/each}} 
    </table> 
    </div> 
    <div> 
    {{outlet}} 
    </div> 
</script> 

Answer 2

是你的東西控制器擴展數組控制器？

App.ThingsController = Em.ArrayController.extend({ 

}) 

做你的屬性渲染？

{{#each item in controller}} 
    {{item.prop}} 
{{/each}}