Ember JS - Handlebars 模板 - @index 在#each 中未定义

Question

我查找了一个重复的问题，但在 SO 上找不到。就这样吧。

我的模板中有一个 #each 块，它成功地打印了数组中的值，但是当我尝试在该块中使用 @index 获取当前索引时，就像这样 - {{@index}}，未定义。

从 official handlebars docs 我找到了这种获取当前索引的方法。

路由器 (router.js) :

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

        });
    });
});

路线 (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;

模板 (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>

我想要做的是为每本书生成 link，并将当前索引用作 :bookId，例如/books/1。

我的代码有什么问题吗？我怎样才能让它发挥作用？

更新： ~~我也试过 {{#each model as |book index|}} 但没有成功。~~

适用于 {{#each model as |book index|}}。问题是我使用新方法 {{@index}} 而不是 {{index}}。

Answer 1

Since ember 1.11.0 index support has been added to the each helper.你可以这样使用

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

Here is a working demo.

Ember JS - Handlebars 模板 - @index 在#each 中未定义

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

javascript

templates

handlebars.js

ember.js

ember-cli