ember.jsoutlet

Ember.js multiple, named outlet usage


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

  1. Sidebar
  2. Toolbar-left
  3. 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.


Solution

  • 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.