Ember.js Connect outlets before any route loads

Question

I have an application with 3 routes:

"/"
"/one"
"/two"

I want to connect outlets like header and footer on the applicationView before any of them load.

Since ember can only navigate to leaf nodes, I can't nest /one and two under / and still be able to navigate to /

This means that I would have to repeat the connectOutlets code for all 3 routes individually to hook up the header and footer.

I can't use connectOutlets on the root property of the Router as the applicationController is not ready yet.

How do I connect outlets on the applicationView when my application first loads before any routes are executed?

Something tells me you want to create a layout view for your app — MilkyWayJoe, Oct 03 '12 at 17:11
Sorry, I may have answered your question too soon. Can you explain why your applicationController isn't ready in the root route? — dmzza, Oct 03 '12 at 19:13
@dmzza http://stackoverflow.com/questions/11768294/connectoutlets-from-root-state-called-before-initialization — dechov, Oct 03 '12 at 19:48
@pauldechov Thanks. I've always used what I edited below because someone else gave me that tip, now I know why. — dmzza, Oct 03 '12 at 21:41

dmzza · Accepted Answer · 2012-10-03T21:37:01.413

You can use connectOutlets in non-leaf routes, and as the router traverses those routes to a leaf route, it will run those connectOutlets. To solve your other problem (routing to '/') it is a good practice to have an index route ('/') in any non-leaf route.

Edit: Since we've confirmed that applicationController is undefined in the root route, simply putting everything in a child of the root route seems to solve that problem, and it doesn't change the functionality of the router.

App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    route: '/',
    app: Ember.Route.extend({
      route: '/',
      connectOutlets: function(router) {
        router.get("applicationController").connectOutlet({
          viewClass: App.HeaderView,
          outletName: 'header'
        });
      },
      index: Ember.Route.extend({
        route: '/',
        connectOutlets: function(router) {
          router.get("applicationController").connectOutlet(...);
        }
      }),
      one: Ember.Route.extend({
        route: '/one',
        connectOutlets: function(router) {
          // if you have a OneController and OneView:
          router.get("applicationController").connectOutlet('one');
        }
      }),
      ...
    })
  })
});

If you take a look at the console output, this jsfiddle shows the `applicationController` is not yet ready in the `connectOutlets` method of the root route: http://jsfiddle.net/SQp7x/14/ — greggreg, Oct 03 '12 at 20:47
I heard about a trick to solve these kinds of glitches by just putting everything in a child route of root. http://jsfiddle.net/dmazza/SQp7x/15/ — dmzza, Oct 03 '12 at 21:28

Ember.js Connect outlets before any route loads

1 Answers1