Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Layout implementation for Ember.js
JavaScript Ruby
branch: master
Failed to load latest commit information.
generators Initial checkin.
packages Use Ember.assert instead of ember_assert
tests Switched to rakep.
.gitignore Initial checkin.
.jshintrc Switched to rakep.
Assetfile
Gemfile
Gemfile.lock Switched to rakep.
LICENSE Initial checkin.
README.md
Rakefile Switched to rakep.
VERSION
config.ru Initial checkin.
project.json Initial checkin.

README.md

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');
Something went wrong with that request. Please try again.