Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Layout implementation for Ember.js

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 generators
Octocat-spinner-32 packages
Octocat-spinner-32 tests
Octocat-spinner-32 .gitignore
Octocat-spinner-32 .jshintrc
Octocat-spinner-32 Assetfile
Octocat-spinner-32 Gemfile
Octocat-spinner-32 Gemfile.lock
Octocat-spinner-32 LICENSE
Octocat-spinner-32 README.md
Octocat-spinner-32 Rakefile
Octocat-spinner-32 VERSION
Octocat-spinner-32 config.ru
Octocat-spinner-32 project.json
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.