Ember.js 多个,命名的插座用法 [英] Ember.js multiple, named outlet usage
问题描述
我有一个应用程序,它将有一个分为三个部分的视图层:
- 侧边栏
- 左侧工具栏
- 右侧工具栏
我花了几个小时试图找到对谷歌有帮助的东西,但我没有运气.我需要一个简短而完整的应用程序示例,说明如何使用 Router 和 connectOutlet 以及命名的出口来完成此操作.
谢谢.
更新:由于 Ember api 更改,此代码已过时.
我已经到了可以说我找到了最适合自己的解决方案的地步.
使用这样的应用程序模板,我可以选择渲染视图的位置.像这样:
App.router = Ember.Router.create({enableLogging: 真,位置:'历史',根:Ember.Route.extend({索引:Ember.Route.extend({路线:'/管理员/',重定向到:'登录'}),登录: Ember.Route.extend({路线:'/管理员/登录/',doLogin:功能(路由器,上下文){严格使用";router.transitionTo('dashboard', context);},connectOutlets:功能(路由器,上下文){严格使用";router.get('applicationController').connectOutlet('login', "login");}}),仪表板:Ember.Route.extend({路线:'/admin/dashboard/',doLogout:功能(路由器,上下文){严格使用";router.transitionTo('登录', 上下文);},connectOutlets:功能(路由器,上下文){严格使用";router.get('applicationController').connectOutlet('sidebar', 'sidebar');router.get('applicationController').connectOutlet('toolbar', 'toolbar');router.get('applicationController').connectOutlet('dashboard', 'dashboard');}})})});
我有三个视图,从解决方案的角度来看,这三个视图并不重要,它们会被渲染到它们的插座中.
希望这对其他人有帮助.
I have an application, which will have a view layer organized in three parts:
- Sidebar
- Toolbar-left
- Toolbar-right
I have spent may last few hours with trying to find something helpful with google, but I had no luck. I would need a short and complete application example on how to do this using Router and connectOutlet, with named outlets.
Thx ahead.
UPDATE: This code is outdated, due to the Ember api changes.
I have reached a point, where I can say that I found the solution which is best for myself.
<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>
Using such a application template, I can choose where to render views. Like this:
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');
}
})
})
});
I have the three views, which are not important from the solution point of view, those get rendered to their outlets.
Hope this helps others.
这篇关于Ember.js 多个,命名的插座用法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!