javascript - Ember JS - Handlebars template - @index being undefined inside #each -

i looked duplicate question couldn't find 1 on so. hence here goes.

i have #each block in template printing values array when try current index using @index within block - {{@index}}, it's undefined.

from official handlebars docs found way of getting current index.

the router (router.js) :

router.map(function() {     this.resource("books", function(){         this.route("about", { path : "/:bookid"}, function(){          });     }); }); 

the route (routes/books.js) :

var booksroute = em.route.extend({     model: function() {         return [{             name: "harry potter & deathly hallows"         }, {             name: "what if?"         }, {             name: "diary of wimpy kid"         }, {             name: "the martian"         }];     } });  export default booksroute; 

the template (templates/books/index.hbs) :

<div class="page-header">     <h1>all books!</h1>     <ul>         {{#each book in model}}             {{@index}}             <li>{{#link-to "books.about"}} {{book.name}} {{/link-to}}</li>         {{/each}}     </ul> </div> 

what want able generate link each book current index being used :bookid e.g. /books/1.

is there wrong in code? how can make work?

update : i have tried {{#each model |book index|}} no luck.

it works {{#each model |book index|}}. problem me doing {{@index}} instead of {{index}} new approach.

since ember 1.11.0 index support has been added each helper. can use like

{{#each model |book index|}}   {{index}}         <li>{{#link-to "books.about" index}} {{book.name}} {{/link-to}}</li> {{/each}} 

here working demo.