ember.js - 如何为列表/单项模板配置 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，我会收到错误消息：

在没有模型对象作为第二个参数的情况下，您只能使用一次 {{render}} 助手，如 {{render "post" post}}。

有趣的是，我可以浏览 URL（即 ../#/things/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}}