更新：13年1月6日
目標:
足場として使用しているメインビューがあります。メイン ビューのさまざまなセクションに子ビューを挿入するつもりです。メイン ビューは動的であり、ユーザーが別のルートを選択すると、別のビューに置き換えられる場合があります。
アプローチ #1:
メイン ビューのアウトレットを定義し、メイン ビュー内の各子ビューのアウトレットに名前を付けました。アウトレットは最上位のテンプレート (メイン ビュー) では正常に機能しますが、ネストされた子アウトレットはレンダリングされません。API はネストされたアウトレットをサポートしていますか?
アプローチ #2: 子テンプレートで、適切なコントローラーが選択され、子ビューが正しいデータでレンダリングされるように、スコープを定義するために {{#with }} を試しました。ただし、 {{#with }} は期待どおりに動作していないようです。
jsfiddle を立ち上げたかったのですが、古いバージョンの Ember.js があります。
########ROUTER Config ########
App.Router.map(function (match) {
match('').to('index');
match('/').to('index');
match('/models').to('models');
match('/list').to('list');
});
App.IndexRoute = Ember.Route.extend({
redirect : function () {
this.transitionTo('models');
}
});
App.ModelsRoute = Ember.Route.extend({
renderTemplates : function () {
var navigationController = this.controllerFor('navigation'),
fuseColController = this.controllerFor('fuseCol');
this.render('navigation-view', {
outlet : 'navigationContent',
controller : navigationController
});
this.render({ outlet : 'mainContent' });
/* this does not work , is it due to nested outlets not being supported?
Are there any events fired when render on mainContent is complete so that child views may be rendered?
this.render('col-view', {outlet : 'fuseColContainer', controller: fuseController}); */
console.log("On Models Route Render");
},
connectOutlets : function (router, context) {
console.log("On Models connnectOutlets");//Is Never called
},
connectOutlet : function (router, context) {
console.log("On Models connnectOutlet"); //Is Never called
},
setupControllers : function (controller) {
console.log("Models setupControllers called");
// this.controllerFor('fuseCol').connectOutlet('fuseColContainer', 'fuseCol');
//deprecated in the new API ?? connecteOutlet throws up error !!!
}
});
############################# Templates #######################
<script type="text/x-handlebars">
<div class="container-fluid">
{{outlet navigationContent}}//This WORKS !!!
{{outlet mainContent}}// This WORKS !!!
</div>
</script>
<script type="text/x-handlebars" id="models-view">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Nested Child 1
{{outlet fuseColContainer}} //Does Not Work
</div>
<div class="span10">
<div class="row-fluid">
<div class="row-fluid">
<div class="span10">Nested Child 2</div>
<div class="span2">Nested Child 3</div>
</div>
<div class="row-fluid">Nest Child 4</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="fuse-col-view" id="fuse-col-view">
<select multiple="true" id="fuseColList">
{{#each item in controller}}
<option>{{item.name}}</option>
{{/each}}
</select>
</script>
################### Controller #################
App.Router = Ember.Router.extend();
App.Router.map(function (match) {
match('').to('index');
match('/').to('index');
match('/models').to('models');
match('/list').to('list');
});
App.IndexRoute = Ember.Route.extend({
redirect : function () {
this.transitionTo('models');
}
});
App.ModelsRoute = Ember.Route.extend({
renderTemplates : function () {
var navigationController = this.controllerFor('navigation'),
fuseColController = this.controllerFor('fuseCol');
this.render('navigation-view', {
outlet : 'navigationContent',
controller : navigationController
});
this.render({ outlet : 'mainContent' });
/* This does not work , i think there should be a better approach
this.render('fuse-col-view', {outlet : 'fuseColContainer', controller : fuseColController});*/
console.log("Models render called");
},
connectOutlets : function (router, context) {
console.log("Models connnectOutlets called");
},
connectOutlet : function (router, context) {
console.log("Models connnectOutlet called");
},
setupControllers : function (controller, playlist) {
console.log("Models setupControllers called");
/*there is no connectOutlet method on controller in API ??*/
// this.controllerFor('fuseCol').connectOutlet('fuseColcontainer', 'fuseCol');
}
});
App.FuseColController = Ember.ArrayController.extend({
content : [],
init : function () {
this.pushObject(App.FuseColItem.create({name : 'Col 1'}));
this.pushObject(App.FuseColItem.create({name : 'Col 2'}));
this.pushObject(App.FuseColItem.create({name : 'Col 3'}));
}
});
App.FuseColItem = Ember.Object.extend({
name : 'Sample Col'
});
App.FuseColView = Ember.View.extend({
templateName : 'fuse-col-view'
});
Ember.js バージョン: 13 年 1 月 3 日にビルド
簡潔にするために、コードの他の部分は省略しています。詳細については、コメントを追加してください。