我有一个应用程序,它将有一个视图层组织为三个部分:1.侧边栏1.工具栏-左1.工具栏-右我已经花了五月过去几个小时试图找到一些有用的谷歌,但我没有运气。我需要一个简短而完整的应用程序示例,就如何做到这一点使用路由器和connectOutlet,与命名的outlet。谢谢。
dced5bon1#
使用新的路由器,您可以执行以下操作:
{{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-模板。你可以阅读更多关于它here。
menu
t40tm48m2#
在应用程序模板中,您需要将一个命名的outlet声明为{{outlet sidebar}},对于您提到的工具栏也是如此。编辑:其余的都过时了,正如@dineth所说,见Rendering a Template。然后在你的路线(让我们说App.NavigationView是你想坚持那里):
{{outlet sidebar}}
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}}帮助器的此文档,以及有关.connectOutlet回调的此文档。
{{outlet}}
.connectOutlet
8i9zcol23#
更新:由于Ember api的更改,此代码已过时。
我已经到了一个地步,我可以说我找到了对自己最好的解决方案。
<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>
使用这样的应用程序模板,我可以选择在哪里呈现视图。
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 来看,它们并不重要,它们被呈现给它们的出口。希望这对其他人有帮助。
3条答案
按热度按时间dced5bon1#
使用新的路由器,您可以执行以下操作:
在您的路线中,您可以处理门店的内容:
你应该有一个
menu
-模板。你可以阅读更多关于它here。
t40tm48m2#
在应用程序模板中,您需要将一个命名的outlet声明为
{{outlet sidebar}}
,对于您提到的工具栏也是如此。编辑:其余的都过时了,正如@dineth所说,见Rendering a Template。
然后在你的路线(让我们说
App.NavigationView
是你想坚持那里):边栏示例:http://jsfiddle.net/q3snW/7/
请参考有关
{{outlet}}
帮助器的此文档,以及有关.connectOutlet
回调的此文档。8i9zcol23#
更新:由于Ember api的更改,此代码已过时。
我已经到了一个地步,我可以说我找到了对自己最好的解决方案。
使用这样的应用程序模板,我可以选择在哪里呈现视图。
我有三种观点,从解决方案的Angular 来看,它们并不重要,它们被呈现给它们的出口。
希望这对其他人有帮助。