how to append optionValue to the input id and label for attribute dynamically?

Question

suppose options = ["low", "medium", "high"]

---

{{#each optionValue in options}}
    <span>
        <input type="radio" id="screen-risk-{{optionValue}}" name="riskRating"/>
        <label for="screen-risk-{{optionValue}}" name="checkbox"> Low </label>
    </span>
{{/each}}

how to append optionValue to the input id and label for attribute dynamically?

Without using any helpers, it should come like screen-risk-low, screen-risk-medium, screen-risk-high

Answer 1

Bound attribute syntax it's only supported in ember >= 1.11.0

See the release blog post

To get what you want, in the current version of ember (1.10.0). you can use unbound

{{#each optionValue in options}}
    <span>
        <input type="radio" id="screen-risk-{{unbound optionValue}}" name="riskRating"/>
        <label for="screen-risk-{{unbound optionValue}}" name="checkbox"> {{optionValue}} </label>
    </span>
{{/each}}

But as described in the docs, it won't update if it changes:

unbound allows you to output a property without binding. Important: The output will not be updated if the property changes. Use with caution.

See a demo