Ember.js多个，命名出口使用

我有一个应用程序，它将有一个视图层分为三个部分：

1. 侧边栏
2. 工具栏左
3. 工具栏右

我花了几个小时，试图find一些有用的谷歌，但我没有运气。 我需要一个简短而完整的应用程序示例，介绍如何使用Router和connectOutlet以及指定的sockets来完成此操作。

Thx在前面

Answer 1

用新的路由器你可以做这样的事情：

{{outlet "menu"}} {{outlet}} 

在您的路线中，您可以处理网点的内容：

 // application route Ember.Route.extend({ renderTemplate: function() { // Render default outlet this.render(); // render extra outlets this.render("menu", { outlet: "menu", into: "application" // important when using at root level }); } }); 

你应该有一个menu模板虽然。

你可以在这里阅读更多。

Answer 2

在您的应用程序模板中，您需要声明一个名为outlet的{{outlet sidebar}} 。 同样的你提到的工具栏。

编辑：其余的是过时的。 正如@dineth所说，看到渲染一个模板 。

然后在你的路线（可以说， App.NavigationView是你想要坚持在那里）：

 App.Router = Em.Router.extend({ root: Em.Route.extend({ index: Em.Route.extend({ route: '/', connectOutlets: function(router) { router.get('applicationController').connectOutlet('sidebar', 'navigation'); } }) }) }); 

边栏示例： http : //jsfiddle.net/q3snW/7/

在{{outlet}}帮助器上引用此文档 ，并在.connectOutletcallback中提供此文档 。

Answer 3

更新：由于Ember api更改，此代码已过时。

我已经到了一个地步，我可以说我find了最适合自己的解决scheme。

 <script type="text/x-handlebars" data-template-name="application"> <div class="container"> <div class="toolbar">{{outlet toolbar}}</div> <div class="main">{{outlet dashboard}}</div> <div class="sidebar">{{outlet sidebar}}</div> </div> </script> 

使用这样的应用程序模板，我可以select渲染视图的位置。 喜欢这个：

 App.router = Ember.Router.create({ enableLogging: true, location: 'history', root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/admin/', redirectsTo: 'login' }), login: Ember.Route.extend({ route: '/admin/login/', doLogin: function(router, context) { "use strict"; router.transitionTo('dashboard', context); }, connectOutlets: function (router, context) { "use strict"; router.get('applicationController').connectOutlet('login', "login"); } }), dashboard: Ember.Route.extend({ route: '/admin/dashboard/', doLogout: function(router, context) { "use strict"; router.transitionTo('login', context); }, connectOutlets: function (router, context) { "use strict"; router.get('applicationController').connectOutlet('sidebar', 'sidebar'); router.get('applicationController').connectOutlet('toolbar', 'toolbar'); router.get('applicationController').connectOutlet('dashboard', 'dashboard'); } }) }) }); 

我有三种观点，从解决的angular度来看，这些观点并不重要。

希望这可以帮助别人。