Rendering a string array with handlebars
Lets say I have an array like this in ember controller,
selectedUsers: ["Popeye", "Sulley", "Gru"];
Now, how can i render each users in an unordered list using handlebars? Can i use the {{#Each}}
helper?
Yes, you should use an each
loop:
<ul>
{{#each selectedUsers}}
<li>{{ this }}</li>
{{/each}}
</ul>
From the docs:
You can iterate over a list using the built-in
each
helper. Inside the block, you can usethis
to reference the element being iterated over.<ul class="people_list"> {{#each people}} <li>{{this}}</li> {{/each}} </ul>
when used with this context:
{ people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] }
will result in:
<ul class="people_list"> <li>Yehuda Katz</li> <li>Alan Johnson</li> <li>Charles Jolley</li> </ul>
You can use the this expression in any context to reference the current context.
This also works
<ul>
{{#each this}}
<li>{{ this }}</li>
{{/each}}
</ul>