これらのテンプレートを考えると
<script type="text/x-handlebars">
<h3>Application outlet:</h3>
<div class="outlet">
{{outlet}}
<div>
<h3><code>'base'</code> outlet:</h3>
<div class="outlet base-outlet">
{{outlet 'base'}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h1>I am the application index, I should be in the application outlet.</h1>
</script>
<script type="text/x-handlebars" data-template-name="foo">
<p>I am foo, I have my own outlet here:</p>
<h3>Foo Outlet:</h3>
<div class="outlet foo-outlet">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="foo/index">
<p>I am foo index, I should be inside <code>#foo-outlet</code> (green border)</p>
</script>
そして、これらのルート:
App.Router.map(function() {
this.resource('foo', function() {
this.resource('bar');
});
});
App.IndexRoute = Ember.Route.extend({
afterModel: function() {
this.transitionTo('foo.index');
}
});
App.FooRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({into: 'application', outlet: 'base'});
}
});
テンプレートはテンプレートに含まfoo/index
れる内部でレンダリングされると予想されますが、アプリケーションのアウトレットにレンダリングされます。ここにライブの例があります: http://jsbin.com/yecatu/6/edit?html,js,output{{outlet}}
foo
呼び出しを入れると、適切な場所に並べ替えられますが、テンプレートが 2 回レンダリングされることに注意this._super()
しrenderTemplate
てfoo/index
くださいfoo
。
更新:私が達成しようとしているのは次のとおりです。
- アプリケーションには名前付きのアウトレットがあるとしましょう
'sidebar'
- ルートは、独自の (名前のない) アウトレットを含むこのサイドバー アウトレットにラッパーをレンダリングできます。
- 次に、そのルートのサブルートは、ラッパー内のアウトレットでレンダリングする必要があります。
したがって、上記の例では、foo
ルートはそのラッパーを'base'
アウトレットにレンダリングする必要があり、そのサブルート (例) のコンテンツは、そのfoo/index
ラッパー (例のクラスfoo-outlet
を持つもの) 内のアウトレット内でレンダリングする必要があります。