Skip to content

Instantly share code, notes, and snippets.

@slindberg
Created January 23, 2014 22:05
Show Gist options
  • Select an option

  • Save slindberg/8587752 to your computer and use it in GitHub Desktop.

Select an option

Save slindberg/8587752 to your computer and use it in GitHub Desktop.

Revisions

  1. slindberg created this gist Jan 23, 2014.
    64 changes: 64 additions & 0 deletions multi-select-input.hbs
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    {{#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"}}
    16 changes: 16 additions & 0 deletions some_template.hbs
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    {{#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}}