新しいember.jsルーティング：アウトレットに接続する方法は？

Question

私はアウトレットを新しいルータアプローチでどのように接続するのか混乱しています。

のindex.html：

... 
<script type="text/x-handlebars" data-template-name="application"> 
    <h4>The application handelbar</h4> 
    {{! outlet 1}} 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    <h4>The index handelbar</h4> 
    {{! outlet 2 and 3}} 
    {{outlet nav}} 
    {{outlet main}} 
</script> 

<script type="text/x-handlebars" data-template-name="main"> 
    <h4>The main handelbar</h4> 
</script> 

<script type="text/x-handlebars" data-template-name="nav"> 
    <h4>The nav handelbar</h4> 
</script> 
... 

app.js：

... 
App.Router.map(function(match) { 
    this.resource("index", { path: "/" }); 
    this.route("test"); 
}); 

App.IndexController = Ember.Controller.extend({ 
}); 

App.IndexView = Ember.View.extend({ 
    templateName: 'index' 
}); 
... 

このコードは、出口1をレンダリングします。

質問：

• はなぜアウトレット-1がレンダリングされますか？ outlet-1と「index」はどのように接続されていますか？
• コンセント2と3を同じ「インデックス」サイトに接続するにはどうすればよいですか？

おかげ
MIW

Answer 1

あなたは（ビルドに応じて、またはrenderTemplates法）renderTemplateメソッドを使用して、ルートハンドラ内でこのようなものを指定する必要があります。

あなたが見ていないのは、Emberが既にあなたのためにかなりのデフォルトを設定しているということです。 Emberによって設定されたデフォルトでは、ルートハンドラ全体を省略することができました。このことができます

renderTemplate: function() { 
    this.render("index"); 
    // this renders the index template into the primary unnamed outlet. 
    this.render("navtemplate", {outlet: "nav"}); 
    // this renders the navtemplate into the outlet named 'nav'. 
    this.render("main", {outlet: "main"}); 
    // this renders the main template into the outlet named 'main'. 
    } 

希望：あなたが欲しい

App.Router.map(function(match) { 
    this.resource("index", { path: "/" }); 
    this.route("test"); 
}); 
App.IndexRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    this.render(); 
    /* this is the default, it will basically render the 
     default template, in this case 'index', into the 
     application template, into the main outlet (i.e. your 
     outlet 1), and set the controller to be IndexController. 
    */ 

    } 
}); 

はlikeso、renderTemplate機能で追加のテンプレートをレンダリングすることです。

Answer 2

Emberは自動的にIndexRoute、IndexController、IndexViewを仮定します。これは、あなたがこのようにそれを行うことができ、ネストされたルートを接続するにはember routing guide

である：

App.OtherRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    this.render('otherTemplate', { 
     into: 'index', 
     outlet: 'nav' 
    }); 
    } 
}); 

Hereすると、別の質問からより多くの深さの答えです。