Skip to content

Instantly share code, notes, and snippets.

@SlexAxton
Last active August 29, 2015 14:04
Show Gist options
  • Save SlexAxton/aa80b120f14910cdb5fd to your computer and use it in GitHub Desktop.
Save SlexAxton/aa80b120f14910cdb5fd to your computer and use it in GitHub Desktop.
nested components
{{! QUESTION
How do I make the outer component send an attribute value into its sub-components,
or have the sub-components read from the parent attributes?
In the following example, the `multiple="true"` attribute changes the toggle group
to act like a set of checkboxes instead of a set of radio buttons, but the semantics
are more like an html 'select' menu.
<select multiple>
<option>A</option>
<option>B</option>
</select>
Specifically in the case below, the `multiple` attribute changes the input elements
inside of the toggle-group to be 'checkbox' instead of 'radio'
}}
{{#toggle-group}}
{{#toggle-button id="foo"}}Foo{{/toggle-button}}
{{#toggle-button id="bar"}}Bar{{/toggle-button}}
{{#toggle-button id="baz"}}Baz{{/toggle-button}}
{{/toggle-group}}
{{! should render as: }}
<ul class="toggle-group">
<li>
<input type="radio" name="toggle-group-1" id="foo"> <label class="toggle-button" for="foo">Foo</label>
</li>
<li>
<input type="radio" name="toggle-group-1" id="bar"> <label class="toggle-button" for="bar">Bar</label>
</li>
<li>
<input type="radio" name="toggle-group-1" id="baz"> <label class="toggle-button" for="baz">Baz</label>
</li>
</ul>
{{! BUTTTTTTT (note multiple="true") }}
{{#toggle-group multiple="true"}}
{{#toggle-button id="foo"}}Foo{{/toggle-button}}
{{#toggle-button id="bar"}}Bar{{/toggle-button}}
{{#toggle-button id="baz"}}Baz{{/toggle-button}}
{{/toggle-group}}
{{! should render as: }}
<ul class="toggle-group">
<li>
<input type="checkbox" id="foo"> <label class="toggle-button" for="foo">Foo</label>
</li>
<li>
<input type="checkbox" id="bar"> <label class="toggle-button" for="bar">Bar</label>
</li>
<li>
<input type="checkbox" id="baz"> <label class="toggle-button" for="baz">Baz</label>
</li>
</ul>
@meirish
Copy link

meirish commented Aug 1, 2014

since components are like views + controllers, you can actually access the outer component from the inner one with parentView.multiple

so ToggleButtonComponent could have a computed prop like so:

isMultiple: Ember.computed.bool('parentView.multiple')

@SlexAxton
Copy link
Author

Thanks! That worked like a charm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment