Handlebars.js 是一种流行的前端模板引擎，可以简化动态生成 HTML 的过程。在实际开发中，我们经常需要在 Handlebars.js 模板中使用 each 迭代器来循环遍历数组或对象，以便动态渲染数据。然而，在嵌套的 each 中，如何访问到父级索引值呢？本文将介绍几种方法来解决这个问题。
方法一：使用更深层级的 each
最简单的方法是添加更多层级的 each。例如，如果想要在一个二维数组中同时访问内部和外部索引，则可以使用以下代码：
------- ------------
------- ------
----- ------ -------------- ----- ------ ----------
---------
---------在这个例子中，每个 inner each 都有自己的 @index，但是可以使用 @../index 访问到 outer each 的 @index 值。
方法二：使用 with 和 ~
如果不想使用更深的 each，还可以使用 with 块和 ~ 符号来捕获父级上下文，并将其存储在一个变量中。例如，如果想在一个二维数组中访问内部和外部索引，则可以使用以下代码：
------- ------------
------- ------
------- ---
----- ------ ----------------- ----- ------ ----------
---------
---------
---------在这个例子中，with 块将父级上下文存储在变量 outerIndex 中，然后可以在 inner each 中使用该变量。
方法三：使用自定义 Helper
最后，如果要在 Handlebars.js 中进行更复杂的操作，可以编写自定义 Helper。Helper 可以让你自定义模板引擎的行为，并且可以在模板中使用类似函数的语法。例如，如果要在一个二维数组中访问内部和外部索引，则可以使用以下代码：
------- ------------
------- ------
------------- ----------------------
---------
---------在这个例子中，我们定义了一个 parentIndex Helper，它将传递给它的参数拼接起来，并用一个连字符分隔开。实现代码如下：
---------------------------------------- -------------------- ----------- - ------ ---------- - --- - ----------- ---
总结
在 Handlebars.js 中访问父级索引可能有些困难，但是有几种方法可以解决这个问题。简单的方式是增加一个更深层级的 each 迭代器，或者使用 with 块和 ~ 符号来捕获父级上下文。更复杂的操作可以通过编写自定义 Helper 来实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25837