Sections in Ember.js components.

1. description.txt

Simply register the two helpers "section" and "yield-section", and start right away!

See example below, using ember-cli:

2. index.hbs

<h1>Hello from the index page!</h1>

{{#my-component parent=this}}
  
  {{#section 'header'}}
    <h2>Header inside my awesome component.</h2>
  {{/section}}
  
  <p>
    Here goes the main body that fits into the standard "yield" helper.
    That's because I'm not in a section.
  <p>
  
  {{#section 'footer'}}
    <p>Show me in the footer, please.<p>
  {{/section}}
  
{{/my-component}}

3. my-component.hbs

<div class="my-component">
  
  <div class="component-header">
    {{yield-section 'header'}}
  </div>
  
  {{yield}}
  
  {{#if parent.footerSection}}
    <div class="component-footer">
      {{yield-section 'footer'}}
    </div>
  {{else}}
    <p>Just some generic content in case nothing else was specified.</p>
  {{/if}}
  
</div>

4. section-helpers.js

import Ember from 'ember';
var section, yieldSection;

section = function(name, options) {
  this.set(name + "Section", options.fn);
};

yieldSection = function(name, options) {
  var context, section;
  if ((context = this.get('parent')) && (sectionBlock = context.get(name + "Section"))) {
    sectionBlock(context);
  }
};

export { section, yieldSection };

5. app.js

import { section, yieldSection } from 'app-name/helpers/section-helpers';

Ember.Handlebars.registerHelper('section', section);
Ember.Handlebars.registerHelper('yield-section', yieldSection);