javascript - Handlebars.js：如何在每个嵌套中访问父索引？

Question

如何在每个循环中访问父 @index 值？

尝试了以下方法：

{{#each company}}
{{#each employee}}
  {{../@index}} // how to access company index here?
{{/each}}
{{/each}}

这会导致错误：

期待“ID”，得到“数据”

Answer 1

示例中存在语法错误。正确的语法是{{@../index}}.

我们正在研究如何在未来的语言版本中支持这些参数的自定义命名，以便更容易处理。 https://github.com/wycats/handlebars.js/issues/907

Answer 2

这对我有用：

{{#each company}}
{{setIndex @index}}
{{#each employee}}
  {{../index}}
{{/each}}
{{/each}}

JS：

Handlebars.registerHelper('setIndex', function(value){
    this.index = Number(value + 1); //I needed human readable index, not zero based
});

只要确保该company对象没有index属性。

Answer 3

回答： {{@../index}}

来自Handlebars 文档（参见“每个”助手部分的底部）：

“嵌套each块可以通过深度路径访问交互变量。例如，{{@../index}}可以使用访问父索引。”

注意：我使用的是 v1.3，所以它至少有那么旧。

提醒：助手是您最后的最佳选择。9/10 有更好的解决方案。

Answer 4

Ember v2.2.0 中似乎有一种新语法。我在这里尝试了所有答案，但它们对我不起作用。

我发现有效的是命名父循环的索引和子循环的索引。

{{#each parents as |parent parentIndex|}}
    {{parentIndex}}
    {{#each children as |child childIndex|}}
        {{parentIndex}}
        {{childIndex}}
    {{/each}}
{{/each}}

Answer 5

注册一个 Helper 方法：

Handlebars.registerHelper('eachWithIndex', function(cursor, options) {
    var fn = options.fn, inverse = options.inverse;
    var ret = "";
    var idx = -1;
    //console.log(cursor);
    cursor.forEach(function(item){
        idx++;
        console.log(item.index);
        item.index = idx;
        ret+=fn(item);
    });
    return ret;
}); 

车把模板：

{{#eachWithIndex outer}}
  {{#each inner}}
   {{../index}} // access outer index like this. I used hanlebars V1.3.0
   {{index}} // access inner index
  {{/each}}
{{/eachWithIndex}}