Accessing Index in #each in emberjs

javascript ember.js handlebars.js
Mohammad Abu Musa picture Mohammad Abu Musa · Nov 5, 2013 · Viewed 31.7k times · Source

Please check out the code attached

http://jsbin.com/atuBaXE/2/

I am trying to access the index using {{@index}} but not seems to be compiling. I think handlebars supports that 

{{#each item in model}}
  {{@index}} 
  {{item}}
{{/each}}

It is not working out for, I can't figure out if the {{@index}} is supported or not

I am using

  • Ember.VERSION : 1.0.0
  • Handlebars.VERSION : 1.0.0

Answer

Marcio Junior picture Marcio Junior · Nov 5, 2013

UPDATE

Since this PR, it's now possible to use the each helper with index, taking advance of the new block params syntax. This is available on canary and hopefully will be enabled by default in ember 1.11

{{#each model as |item index|}}
  <li>
    Index: {{index}} Content: {{item}}
  </li>
{{/each}}

Live sample

FOR OLD VERSIONS

You can use {{_view.contentIndex}}.

{{#each item in model}}
  <li>
    Index: {{_view.contentIndex}} Content: {{item}}
  </li>
{{/each}}

Live sample

Related questions

Combine linkTo and action helpers in Ember.js

I need to combine linkTo and action helpers in Ember.js. My code is: {{#link-to 'index'}}<span {{action 'clear'}}>Clear</span>{{/link-to}} But I would like to make this something like this: {{#link-to 'index' {{action 'clear'}} }}…

Read More
How do I add a separator between elements in an {{#each}} loop except after the last element?

I have a Handlebars template where I'm trying to generate a comma-separated list of items from an array. In my Handlebars template: {{#each list}} {{name}} {{status}}, {{/each}} I want the , to not show up on the last item. Is there …

Read More
Views vs Components in Ember.js

I am learning ember.js, and I am trying to understand the difference between a view and a component. I see both as a way of making reusable components. From Ember's website on views: Views in Ember.js are typically …

Read More