Reputation: 13
I'm having some trouble wrapping my head around Ember.js.
I'm trying to pass the value for selected to a component (course-select), but selected has to be determined first using a value derived from the "#each" block (competency.id).
I've written a helper capable of correctly determining the value and can send it back to the template:
{{current-course-helper competency.id}} // 32
What I need to do is pass the helper result to the component (course-select) as the value for selected.
The code below shows what I would like to do, but having a {{...}} inside another {{...}} results in a build error.
<table width="600px">
{{#each model.tier1Competencies as |competency|}}
<tr>
<td>{{competency.domain}}</td>
<td>{{competency.number}}</td>
<td>{{current-course-helper competency.id}}</td> // Works here
<td>
{{course-select
content = model.tier1Team.tier1Courses
optionValuePath = "content.id"
optionLabelPath = "content.name"
selected = {{current-course-helper competency.id}} // But I need it here
prompt = "Available Courses..."
}}
</td>
</tr>
{{/each}}
</table>
Determining the value somewhere else first seems problematic because I need competency.id from the {{#each}} block to determine the value to pass to the component.
Is there some way to pass the result of the Handlebar Helper to the component?
Upvotes: 1
Views: 113
Reputation: 6577
The correct syntax is:
{{course-select
content = model.tier1Team.tier1Courses
optionValuePath = "content.id"
optionLabelPath = "content.name"
selected = (current-course-helper competency.id)
prompt = "Available Courses..."
}}
It's called a nested helper, you can see examples of it for example in the concat
helper documentation. It can be used with any helper, and you can nest however many times you want!
Upvotes: 0