Ember.js多个命名出口的使用(Ember.js multiple, named outlet

我有一个应用程序，这将有三个部分组织了一个视图层：

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

我已经用了可能会持续几个小时，试图找到一些与谷歌的帮助，但我有没有运气。 我需要就如何做到这一点使用路​​由器和connectOutlet，名为网点短和完整的应用实例。

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 -template虽然。

你可以阅读更多关于它在这里 。

Answer 2:

在您的应用程序模板，你需要声明一个名为插座，因为{{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}}帮手，而这个文件在.connectOutlet回调。

Answer 3:

UPDATE：此代码已经过时，由于灰烬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');
            }
        })
    })
});

我有三个观点，这是不从的角度解决问题重要，那些得到呈现给他们的出口。

希望这可以帮助别人。

文章来源: Ember.js multiple, named outlet usage