Ember.js嵌套插座 更新：1月6日13
目标： 我有一个主视图，我用它作为脚手架。我打算在主视图的不同部分插入子视图。主视图是动态的，当用户选择不同的路线时，可以用另一个视图替换主视图 方法1： 我为主视图定义了一个出口，并为主视图中的每个子视图命名了出口。对于顶级样板（主视图），插座工作正常，但不会渲染嵌套的子插座。API支持嵌套出口吗 方法2： 在子模板中，我尝试{{#with}}定义范围，以便选择正确的控制器，并使用正确的数据呈现子视图。然而，{{{#with}}}似乎没有如预期那样发挥作用 我本想安装JSFIDLE，但他们有一个更旧版本的Ember.jsEmber.js嵌套插座 更新：1月6日13,ember.js,Ember.js,目标： 我有一个主视图，我用它作为脚手架。我打算在主视图的不同部分插入子视图。主视图是动态的，当用户选择不同的路线时，可以用另一个视图替换主视图 方法1： 我为主视图定义了一个出口，并为主视图中的每个子视图命名了出口。对于顶级样板（主视图），插座工作正常，但不会渲染嵌套的子插座。API支持嵌套出口吗 方法2： 在子模板中，我尝试{{#with}}定义范围，以便选择正确的控制器，并使用正确的数据呈现子视图。然而，{{{#with}}}似乎没有如预期那样发挥作用 我本想安装JSFIDLE，但他们有一
########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'
});
为了保持简洁，我省略了代码的其他部分。请添加注释以获取更多信息 你安装路由器了吗？如果是这样，这将自动为路由名称创建相应的命名空间视图、控制器。正如您所做的，如果您需要ArrayController，您可以手动实例化它 如果按如下方式设置路由器：
App.Router.map(function (match) {
match("/").to("col");
});
App.colRoute = Ember.Route.extend({
renderTemplate: function(){
this.render('col-view')
}
})