Ember.js多个，命名插座使用 [英] Ember.js multiple, named outlet usage

问题描述

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

I have an application, which will have a view layer organized in three parts:

1. 侧边栏


2. 工具栏左侧


3. 工具栏右侧

我花了几个小时试图找到一些有用的谷歌，但我没有运气。我需要一个简短而完整的应用示例，说明如何使用路由器和connectOutlet，使用命名网点。

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。

Thx ahead.

推荐答案

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

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

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.

希望这有助于他人。

这篇关于Ember.js多个，命名插座使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！