Skip to content

Instantly share code, notes, and snippets.

@slindberg
Created January 23, 2014 22:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save slindberg/8587752 to your computer and use it in GitHub Desktop.
Save slindberg/8587752 to your computer and use it in GitHub Desktop.
Ember Components: Overridable Content Blocks Example
{{#content-for "option"}}
<a href="#">{{view.label}}</a>
{{/content-for}}
{{#content-for "unselected-option"}}
{{content-for "option"}}
{{/content-for}}
{{#content-for "selected-option"}}
{{content-for "option"}}
{{/content-for}}
{{#content-for "unselected-options"}}
{{#collection unselectedOptionsView}}
{{content-for "unselected-option"}}
{{/collection}}
{{/content-for}}
{{#content-for "selected-options"}}
{{#collection selectedOptionsView}}
{{content-for "selected-option"}}
{{/collection}}
{{/content-for}}
{{#content-for "select-all"}}
{{#view selectAllView}}{{{view.label}}}{{/view}}
{{/content-for}}
{{#content-for "unselect-all"}}
{{#view unselectAllView}}{{{view.label}}}{{/view}}
{{/content-for}}
{{#content-for "actions"}}
{{content-for "select-all"}}
{{content-for "unselect-all"}}
{{/content-for}}
{{#content-for "filter-input"}}
{{view filterInputView}}
{{/content-for}}
{{#content-for "clear-filter"}}
{{#view clearFilterView}}{{{view.label}}}{{/view}}
{{/content-for}}
{{#content-for "filter"}}
{{content-for "filter-input"}}
{{content-for "clear-filter"}}
{{/content-for}}
{{#content-for "component"}}
<span class="multi-select-input-filter">
{{content-for "filter"}}
</span>
{{content-for "unselected-options"}}
<span class="multi-select-input-actions">
{{content-for "actions"}}
</span>
{{content-for "selected-options"}}
{{/content-for}}
{{yield}}
{{content-for "component"}}
{{#multi-select-input blah blah}}
{{#content-for "filter"}}
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-search"></span>
</span>
{{content-for "filter-input"}}
<span class="input-group-btn">
{{content-for "clear-filter"}}
</span>
</div>
{{/content-for}}
{{#content-for "option"}}
<a href="#">{{view.label}} (<code>{{view.value}}</code>)</a>
{{/content-for}}
{{/multi-select-input}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment