Skip to content

Instantly share code, notes, and snippets.

@johanobergman
Last active September 29, 2015 22:37
Show Gist options
  • Select an option

  • Save johanobergman/60483a8f49c30f245eef to your computer and use it in GitHub Desktop.

Select an option

Save johanobergman/60483a8f49c30f245eef to your computer and use it in GitHub Desktop.
Sections in Ember.js components.

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

See example below:

<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}}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment