I have created a reusable component (radio button group) that binds to and modifies a passed-in controller property. It looks a bit like this:
{{radio-button-group label=question selections=selections value=valueToBind}}
The above works great. However, there are many pages in my application where there are to be multiple instances of this component. I would like to create a wrapper component that iterates over a collection of property names and generates the radio button groups dynamically. I currently have something like this:
Controller:
values: ['value1', 'value2', 'value3', ...],
value1: 0,
value2: 2,
value3: 1,
.
.
.
Component template:
{{#each value in values}}
{{radio-button-group label=question selections=selections value=value}}
{{/each}}
This does not work, as the value of ‘value’ in the loop is just the name of the property.
What I want to end up with is this:
{{radio-button-group label=question selections=selections value=value1}}
{{radio-button-group label=question selections=selections value=value2}}
{{radio-button-group label=question selections=selections value=value3}}