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

I looked for a duplicate question but couldn't find one on SO. Hence here it goes.

I have an #each block in my template which is successfully printing the values from an array but when I try to get the current index using @index within that block like this - {{@index}}, it's undefined.

From the official handlebars docs I found this way of getting the 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 & The Deathly Hallows"
        }, {
            name: "What If?"
        }, {
            name: "Diary of a 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 I want to be able to do is to generate link to each book with the current index being used as the :bookId e.g. /books/1.

Is there anything wrong in my code? How can I make it work?