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

如何为列表/单项模板配置Ember Routing？

2 个答案: