ghempton / ember-layout

Layout implementation for Ember.js

This library has been deprecated. Please read this blog post.

Ember Layout

Provides an intuitive layout mechanism for Ember.js. The core addition is a {{dynamicView}} handlebars helper which allows for child views to be dynamically swapped out from anywhere in the template.

How It Works

The {{dynamicView}} binds itself to the content property of its containing view. When the content property is set to a subclass of Ember.View, the dynamic view helper's contents will be replaced to reflect the new view. This property can be changed at any time. To use a different property, simply specify it as follows: {{dynamicView propertyName}}.

Example Layout

Code for the view:

App.layout = Ember.View.create({
  templateName: 'main-layout'
});

Associated template:

<section>
  <header>
    {{dynamicView header}}
  </header>
  
  <div id="content">
    {{dynamicView}}
  </div>
</section>

The {{dynamicView}} regions of the view can now be dynamically populated in code:

App.headerView = Ember.View.create( ... );
App.layout.set('header', headerView);

In fact, swapping out the view in this example is as simple as setting the header or content properties of the view. The content property is the default name of the property bound by {{dynamicView}} if none is specified.

Layout States

Ember.Layout also integrates with Ember's StateManager (and consequently plays well with Ember.RouteManager):

App.stateManager = Ember.StateManager.create({
  rootView: App.layout,
  section1: Ember.LayoutState.create({
    viewClass: App.Section1
  }),
  section2: Ember.LayoutState.create({
    viewClass: App.Section2
  })
})

App.stateManager.goToState('section1');

ember-layout's Issues

One of the assertions is not asserting

Hi, I noticed https://github.com/ghempton/ember-layout/blob/master/packages/ember-layout/lib/helpers/dynamic_view.js#L39 the I think the assertion is back to front.

However fixing it breaks the example app (couldn't get tests running).
Thoughts?

unhandled event error if using Ember.data

Discovered that when ember-layout + ember-routemanager are combined with ember-data, you get a 'setData' event being dispatched by the RESTadapter that seems to hit one of the RouteManagers LayoutStates. This causes an error.

The particular event is occuring because in the enter() function for the state, I'm calling find on the datastore, which returns the model record it has immediately, and then dispatches an ajax request for updated information, which triggers a callback when it comes back.

Unfortunately I don't have a simple demo available of the problem, but let me know if you need more to go on, or can see why this is happening

Layout Nesting doesn't work with Ember-0.9.8.1

Hi guys,

Ember
Version: v0.9.8.1-460-gbbd45da

The problem is, if we see on example (http://ghempton.github.com/ember-layout-example/) code:

<script type="text/x-handlebars" data-template-name="section">
  <section>
    <h1>{{title}}</h1>
    {{lorem type=paragraph amount=4}}
  </section>
</script>

The view tags like {{title}} display parentView fields (in example case it's will main layout, but should be ``section`)

// The top level layout
App.main = Em.View.create({
  templateName: 'main'
});

It's easy to test, just add ``{{templateName}}into children view and you will see

main

` when you click on any `sections` links:

<script type="text/x-handlebars" data-template-name="section">
  <section>
    <h1>{{title}}</h1>
    <h2>{{templateName}}</h2>
    {{lorem type=paragraph amount=4}}
  </section>
</script>

Do you have any ideas how to fix it? =)
Thank you!