How do you manage the ui-layout of an Ember.js app?

Question

I am looking for options to manage the ui-layout of an ember application I am currently working on.

The application has to be very flexible (configurable) when it comes to the ui-layout - so having layout-containers with regions like "top", "left", "center", "right" and "bottom" which can be nested whould be a good fit (thats how most layout-managers manage layout).

I found a few solutions, but am somehow undecided:

1. yui2-layout-manager (Demo) Seems a bit old/clunky, successor, yui3-layoutmanager, is in "planning" stage since months (years?)

2. jquery-ui-layout (Demo) Looks a bit bloated. Codebase is not public: As it seems the project-owner does not want it to be too public(?) (from what i read in the google-group, someone asked why its not on github...)

3. dojotoolkit (Demo) Seems quit a bit "obtrusive"

All in all no solution feels "good" to me and I wonder if I should better write the layout-managing-logic myself. What do you think?

Answer 1

Check those two addons:

https://github.com/ghempton/ember-layout

https://github.com/ghempton/ember-routemanager

Also check the demo http://ghempton.github.com/ember-layout-example/

Edit: I think this project: https://github.com/flamejs/flame.js is extremely close to what you want.

Answer 2

JQuery ui-layout is a problem with Ember, because ui-layout requires a ui-layout-center element at layout time, but Ember {{outlet}}'s typically defer the presence of these.