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

I searched for a duplicate question but couldn't find it on SO. From here it goes.

I have a block #each

in my template that prints values ​​from an array successfully, but when I try to get the current index using @index

inside that block like this - {{@index}}

, it is undefined.

From the official manual docs, I found this way of getting the current index.

Router (router.js):

Router.map(function() {
    this.resource("books", function(){
        this.route("about", { path : "/:bookId"}, function(){

        });
    });
});

      

        
        
        
      

    

Route (routes / books.js):

var BooksRoute = Em.Route.extend({
    model: function() {
        return [{
            name: "Harry Potter & The Deathly Hallows"
        }, {
            name: "What If?"
        }, {
            name: "Diary of a Wimpy Kid"
        }, {
            name: "The Martian"
        }];
    }
});

export default BooksRoute;

      

        
        
        
      

    

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 I want to do is create a link to each book with the current index used like :bookId

eg. /books/1

...

Is there something wrong with my code? How can I get it to work?

UPDATE: I've also tried {{#each model as |book index|}}

with no luck.

Works with {{#each model as |book index|}}

. The problem was what I was doing {{@index}}

instead {{index}}

with the new approach.