Handlebars.js: 如何在嵌套 each 中访问父级索引？

Handlebars.js 是一种流行的前端模板引擎，可以简化动态生成 HTML 的过程。在实际开发中，我们经常需要在 Handlebars.js 模板中使用 each 迭代器来循环遍历数组或对象，以便动态渲染数据。然而，在嵌套的 each 中，如何访问到父级索引值呢？本文将介绍几种方法来解决这个问题。

方法一：使用更深层级的 each

最简单的方法是添加更多层级的 each。例如，如果想要在一个二维数组中同时访问内部和外部索引，则可以使用以下代码：

{{#each outerArray}}
  {{#each this}}
    Outer Index: {{@../index}}, Inner Index: {{@index}}
  {{/each}}
{{/each}}

在这个例子中，每个 inner each 都有自己的 @index，但是可以使用 @../index 访问到 outer each 的 @index 值。

方法二：使用 with 和 ~

如果不想使用更深的 each，还可以使用 with 块和 ~ 符号来捕获父级上下文，并将其存储在一个变量中。例如，如果想在一个二维数组中访问内部和外部索引，则可以使用以下代码：

{{#each outerArray}}
  {{#with this}}
    {{#each .}}
      Outer Index: {{~outerIndex~}}, Inner Index: {{@index}}
    {{/each}}
  {{/with}}
{{/each}}

在这个例子中，with 块将父级上下文存储在变量 outerIndex 中，然后可以在 inner each 中使用该变量。

方法三：使用自定义 Helper

最后，如果要在 Handlebars.js 中进行更复杂的操作，可以编写自定义 Helper。Helper 可以让你自定义模板引擎的行为，并且可以在模板中使用类似函数的语法。例如，如果要在一个二维数组中访问内部和外部索引，则可以使用以下代码：

{{#each outerArray}}
  {{#each this}}
    {{parentIndex ../@index}}-{{@index}}
  {{/each}}
{{/each}}

在这个例子中，我们定义了一个 parentIndex Helper，它将传递给它的参数拼接起来，并用一个连字符分隔开。实现代码如下：

Handlebars.registerHelper('parentIndex', function(outerIndex, innerIndex) {
  return outerIndex + '-' + innerIndex;
});

总结

在 Handlebars.js 中访问父级索引可能有些困难，但是有几种方法可以解决这个问题。简单的方式是增加一个更深层级的 each 迭代器，或者使用 with 块和 ~ 符号来捕获父级上下文。更复杂的操作可以通过编写自定义 Helper 来实现。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25837