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

Question

我寻找了一个重复的问题，但在 SO 上找不到。因此，它开始了。

我的模板中有一个 #each block ，它成功地打印了数组中的值，但是当我尝试在该 block 中使用 @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>

我想做的是生成指向每本书的链接，当前索引用作 :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.