Ember.js multiple, named outlet usage

不羁的心 提交于 2019-11-29 20:15:29

With the new Router you can do something like this:

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

In your Route you can handle the content of the outlets:

// 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
        });
    }
});

You should have an menu-template though.

You can read more about it here.

In your application template, you'll need to declare a named outlet as {{outlet sidebar}}. Likewise for the toolbars you mentioned.

EDIT: The rest is out of date. As @dineth said, see Rendering a Template.

Then in your route (lets say App.NavigationView is what you want to stick there):

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

Sidebar example: http://jsfiddle.net/q3snW/7/

Reference this documentation on the {{outlet}} helper, and this documentation on the .connectOutlet callback.

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.

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!