Search code examples
ember.jshandlebars.js

What is the {{#each as}} syntax in ember?

I came across this question How to set itemController in each as (ember 1.11 beta3)? while trying to figure out some stuff about controllers, and the asker used this syntax inside their {{#each}}

{#each content as |product index|}}
  {{index}}
{{/each}}

I've never seen this before and I couldn't find any documentation on it. Could someone explain what this does?

Solution

  • This syntax is block params introduced in Ember 1.10. Following this link will give you more info, but basically it allows you to do iterate on collection still having controller (or components) scope accessible inside.

    The index is basically an index here.

    {{somePropertyOnController}}
{#each content as |product index|}}
  <!-- index is an index in iteration -->
  {{index}}
  <!-- product is an object in the array / enumeration -->
  {{product}}
  <!-- still have access to controller -->
  {{somePropertyOnController}}
{{/each}}