更新：2013 年 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 日
我省略了代码的其他部分以保持简短。请添加评论以获取更多信息。