单个路由的多个控制器

时间:2014-12-19 02:55:24

标签: ember.js

我是Ember的初学者,就我所知,对于一条路线,只能有一个控制器,假设我有一个带有下面布局的webapp,在右侧和左侧栏中,我&#39 ; ll有一个小部件,在主列中,我将有界面。我想让一个控制器管理右,左和主列,这可以在Ember中实现吗?

enter image description here

1 个答案:

答案 0 :(得分:1)

是。要实现这一点,您需要了解的是余烬手柄{{outlet}}助手。默认情况下,路由器将根据您所在的路由使用相应控制器支持的相应模板填充插座。但是,您可以像这样修改此默认行为:

第1步:在您的application.hbs中提供多个出口并命名。

{{outlet sideBarLeft}}
{{outlet}}
{{outlet sideBarRight}}

步骤2:告诉应用程序路由如何使用模板/控制器填充这些出口。

App.ApplicationRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('leftStuff', {    // the template to render
      into: 'application',        // the template to render into
      outlet: 'sideBarLeft',      // the name of the outlet in that template
      controller: 'leftStuff'     // the controller to use for the template
    });
    this.render('rightStuff', {
      into: 'application',
      outlet: 'sideBarRight',
      controller: 'rightStuff'
    });
  }
});

现在,ember应该始终使用指定的模板/控制器填充左侧和右侧的条形图,并且主区域应默认为当前路径(即,只要您浏览页面,它就会更改)。 我希望这是您想要的,如果他们与我的解决方案不同,请随时评论您的发现,以便我可以更新我的答案。

如果这不是开箱即用,我建议您查看ember.js上的{{outlet}} apitemplating guide。它们为很多用例提供了代码示例。