特定のルートに 2 つのアウトレットがあり、同じルートに 2 つの異なるテンプレートを 2 つの異なるアウトレットに表示したいというシナリオがあります。
詳細テンプレート:
<script type="text/x-handlebars" data-template-name="details">
Details Template
{{#linkTo "index"}}Home{{/linkTo}}
<hr/>
<h4>DETAILS</h4>
<hr/>
<div class='outletArea'>
{{outlet "detailsList"}}
</div>
<hr/>
<div class='outletArea'>
{{outlet "detailsMatrix"}}
</div>
</script>
ルートは次のように定義されます。
App.DetailsRoute = Ember.Route.extend({
renderTemplate: function () {
this._super();//to render the details temlate whch has outlets
this.render('detailsList', { outlet: 'detailsList' });//render the list in list outlet
this.render('detailsMatrix', { outlet: 'detailsMatrix' });//rendet the matrix in matrix outlet
}
});
ただし、これらの 2 つのテンプレートは、ルート要素で直接レンダリングされるのではなく、これらの 2 つのアウトレットでレンダリングされません。
私の問題のフィドルはhttp://jsfiddle.net/anshulguleria/eCTtu/です
jsfiddle のように、これら 2 つのテンプレートを灰色の領域にレンダリングしたかったのです。したがって、リンクをたどると、レンダリングされたテンプレートが削除されず、何度もレンダリングされます。