Ember.js 如何为列表/单项模板配置余烬路由？

我想在页面顶部的表格中列出项目列表。当用户单击表中的一个项目时，该项目应呈现在表下方的一个列表中。以下是我列出的哈佛商学院的情况：

<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>

---

我缺少什么？

您的东西控制器是否扩展了阵列控制器

 App.ThingsController = Em.ArrayController.extend({

 })

您的属性是否渲染

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

---

好的，我知道了。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>

我的东西
建议1
pro2
{{{#每件事控制器}
{{{#链接到“thing”thing}{{{thing.prop1}}{{/linkTo}}
{{thing.prop2}
{{thing.prop3}
{{/每个}}
{{outlet}}

linkTo已被弃用，而linkTo也是首选，但我认为linkTo仍然可以正常工作。

<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>