ember.js - 如何将模型信息传递给嵌套模板中的每个语句？

Question

我有一个索引路径，我需要根据模型列表在一个插座中填充菜单。但是我无法在每个语句中表示模型。

这是类别模型：

App.Category = DS.Model.extend({
    title: DS.attr('string'),
    parent: DS.belongsTo('App.Category')
})

这是我渲染它的indexRoute

App.IndexRoute = Em.Route.extend({
renderTemplate: function(){
    this.render('index')
    this.render('categoryMenu',
        {
            outlet: 'sidebar',
            into: 'index',
            model: function() {
                return App.Category.find()
            },
            controller: App.CategoriesController
        })
    this.render('badgesList',{
        outlet: 'badgesList',
        into: 'index'
    })
}
})

索引模板：

<script type="text/x-handlebars" data-template-name="index">
    <div class="span3">
        {{outlet sidebar}}
    </div>
    <div class="span8">
       {{outlet badgesList}}
    </div>
</script>

嵌套类别模板

<script type="text/x-handlebars" data-template-name="categoryMenu">
    <ul>
        {{#each model}}
            {{title}}
        {{/each}}
    </ul>
</script>

我试图将每个语句更改为几个不同的东西，例如模型中的控制器或项目，但没有显示任何内容。

感谢您的任何帮助！

Answer 1

首先让自己CategoriesController像这样：

App.CategoriesController = Ember.ArrayController.extend({
    content: function () {
        return App.Category.find()
    }.property()
});

将您的模板重命名为categories

<script type="text/x-handlebars" data-template-name="categories">
    <ul>
        {{#each model}}
                {{title}}
        {{/each}}
    </ul>
</script>

在您的index模板中替换{{outlet}}为{{render 'categoies'}}

<script type="text/x-handlebars" data-template-name="index">
    <div class="span3">
        {{render 'categoies'}}
    </div>
    <div class="span8">
           {{outlet badgesList}}
    </div>
</script>

最后一件事删除调用渲染categoryMenu。