Ember.js渲染默認內容到嵌套插座

Question

如何將默認內容呈現到嵌套插座中？

例如，如果我有一個這樣的索引模板：

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

任何幫助表示贊賞。

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