Counter for handlebars #each

javascript templates handlebars.js template-engine
algorithmicCoder picture algorithmicCoder · Mar 1, 2013 · Viewed 30.2k times · Source

In Handlebars, say i have a collection of names how can i do

{{#each names}}
{{position}}
{{name}}
{{/each}}

where {{position}} is 1 for the first name, 2 for the second name etc. Do I absolutely have to store the position as a key in the collection?

Answer

Smix picture Smix · Dec 16, 2013

You can do this with the built-in Handlebars @index notation:

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

@index will give the (zero-based) index of each item in the given array.

Please note for people using Handlebars with the Razor view engine you must use the notation @@index to avoid compilation errors.

For more built-in helpers see http://handlebarsjs.com/

Related questions

How to find Array length inside the Handlebar templates?

I have a Handlebars template which is rendered using a json object. In this json I am sending an array. Like this: var json = { "array":["abc","def","ghi","jkl"] } Now in my template I want to find the length of …

Read More
How to use comments in Handlebar templates?

I am using Handlebar.js as my templating engine. Now I want to comment out some of the blocks in my handlebar templates. But then I realized that Handlebar doesn't ignore the expressions inside the Handlebar comment block. Any workaround …

Read More
Access a variable outside the scope of a Handlebars.js each loop

I have a handlebars.js template, just like this: {{externalValue}} <select name="test"> {{#each myCollection}} <option value="{{id}}">{{title}} {{externalValue}}</option> {{/each}} </select> And this is the generated output: myExternalValue <select …

Read More