Ember-cli for Handlebars @vars in each helper (i.e. @index, @key, @first, @last)

Question

I get a compilation error in ember-cli when I have a Handelbars template that uses @vars variables (i.e. @index, @key, @first, @last) inside each helper. (See http://handlebarsjs.com/#iteration for documentation of these @vars variables within each helper.) The following is a simple application built using ember-cli that contains only two files added to the program: routes / application.js and templates / application.hbs. At the bottom of this message is a screenshot of the compilation error message given by ember-cli. Is there an error in my code? Or is this a bug I should report to github @ https://github.com/stefanpenner/ember-cli ?

routes / application.js

export default Ember.Route.extend({ model: function() { return ['red', 'blue', 'green']; } }); 

Templates / application.hbs

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

Screenshot of ember-cli compilation error message:

The following are versions of various tools:

• ember-cli: 0.0.40
• node: 0.10.30
• npm: 1.4.21
• Steering wheel: 1.3.0
• Amber: 1.6.1

Answer 1

It really is not related to ember-cli. Ember Handlebars does not support @keyword elements.

Answer 2

You can reproduce the behavior of the following Handlebars keywords: @index , @key , @first , @last .

@index

 {{#each array as |item index|}} Index of item: `{{item}}` is: `{{index}}` {{/each}} 

@key

 {{#each-in object as |key value|}} {{key}}: {{value}} {{/each-in}} 

@first

You can also simulate @first behavior using the ember-truth-helpers addon and using the eq helper - thanks to kristjan reinhold for this idea:

 {{#each array as |item index|}} {{#if (eq index 0)}} <!-- first element specific html --> {{else}} <!-- other html --> {{/if}} {{/each}} 

Instead of (eq index 0) you can use (eq item array.firstObject) .

@last

As dwickern, you can use Ember.Array.lastObject to simulate @last behavior.

 {{#each array as |item|}} {{#if (eq item array.lastObject)}} <!-- last element specific html --> {{else}} <!-- other html --> {{/if}} {{/each}}