nested components

test.hbs

{{! 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>

Thanks! That worked like a charm.