Rendering a string array with handlebars

Question

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?

Answer 1

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 use this 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.

Answer 2

This also works

<ul>
{{#each this}}
<li>{{ this }}</li>
{{/each}}
</ul>