Ember.js 将默认内容呈现到嵌套出口

Question

如何将默认内容渲染到嵌套的 outlet 中？

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

<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' });
    });
});

当我使用 link-to 助手将页面加载到插座时，它工作正常。但是，我不知道如何在页面首次加载时将默认内容呈现到插座中。

如果我这样做：

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

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

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

我收到以下错误消息：

Error while processing route: index.index Assertion Failed: An outlet (centre) was specified but was not found. Error: Assertion Failed: An outlet (centre) was specified but was not found.

即使使用命名插座：

{{outlet "centre"}}

感谢任何帮助。

Answer 1

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

我还建议删除 default 资源，因为 Ember 通过索引提供该资源。顶部模板是 application.hbs，它实际上只有一个 {{outlet}} 在里面。所以总结一下：

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

Answer 2

谢谢大家，我用的是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');
    }
});

Ember.js 将默认内容呈现到嵌套出口

Ember.js Rendering default content to a nested outlet

ember.js