Ember.js 将默认内容渲染到嵌套插座答案

【问题标题】：Ember.js Rendering default content to a nested outletEmber.js 将默认内容渲染到嵌套插座
【发布时间】：2015-05-15 00:33:01
【问题描述】：

如何将默认内容呈现到嵌套插座中？

例如，如果我有这样的索引模板：

<script type="text/x-handlebars" id="index">
    <div>{{outlet}}</div>
</script>

<script type="text/x-handlebars" id="photo">
    Photo!
</script>

<script type="text/x-handlebars" id="default">
    Default photo
</script>

还有一个嵌套路由：

App.Router.map(function() {
    this.resource('index', { path: '/'}, function() {
        this.resource('default');
        this.resource('photo', { path: ':id' });
    });
});

当我使用链接到帮助程序将页面加载到出口时，这很好用。但是，我不知道如何在页面首次加载时将默认内容呈现到插座中。

如果我这样做：

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function(controller, model) {
        this._super(controller, model);
        this.render('default');
    },
});

它将默认内容呈现到主插座中。如果我尝试指定一个命名的插座：

this.render('default', { outlet: 'centre' });

我收到以下错误消息：

处理路由时出错：index.index 断言失败：指定了出口（中心）但未找到。错误：断言失败：指定了出口（中心）但未找到。

即使使用命名插座：

{{outlet "centre"}}

任何帮助表示赞赏。

【问题讨论】：

索引是您的路线，因此您需要根据您的命名架构将您的路线命名为IndexIndexRoute
同意@oshikryu 的方案。在您的情况下，将路由更改为更合理的方式可能是有意义的。

标签： ember.js

【解决方案1】：

谢谢大家，我使用了oshikryu的解决方案。

模板：

<script type="text/x-handlebars" id="index">
    <div>{{outlet}}</div>
</script>

<script type="text/x-handlebars" id="photo">
    Photo!
</script>

<script type="text/x-handlebars" id="default">
    Default photo
</script>

JavaScript：

App.Router.map(function() {
    this.resource('index', { path: '/'}, function() {
        this.resource('photo', { path: ':id' });
    });
});

App.IndexIndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('default');
    }
});

【讨论】：

【解决方案2】：

删除索引资源，它已经为您创建，会让事情变得混乱。此外，如果您需要在游戏初期挂钩 renderTemplate，那么您可能没有遵循 Ember 的约定。

我还建议删除 default 资源，因为 Ember 通过索引提供了该资源。最上面的模板是 application.hbs，它实际上只有一个 {{outlet}}。综上所述：

删除索引模板
将 id="default" 更改为 id="index"
从路由器映射中删除索引资源

【讨论】：