如何在Handlebars模板中获取数组指定索引的元素

嘿，我懂你碰到的麻烦了——在Handlebars的#each someOtherList循环里，想借着当前的@index直接取外部传入的Fruits数组对应位置的元素，之前试的写法都没生效对吧？别慌，这是因为没处理好Handlebars的上下文作用域，我给你理清楚怎么搞定。

正确的两种写法 #

你需要先跳出当前each的上下文，才能访问到外部的Fruits数组，这里有两种靠谱的方式：

方法1：用../跳出当前上下文

在#each块里，当前上下文是someOtherList的每一项，外部的Fruits需要用../向上一级上下文查找，再配合[@index]拿到对应索引的元素：

{{#each someOtherList}}
  当前索引对应的水果：{{../Fruits[@index]}}
{{/each}}

方法2：用@root直接访问根上下文

如果模板嵌套层级比较深，../的数量不好控制，直接用@root定位到最顶层上下文，就能直接获取Fruits数组：

{{#each someOtherList}}
  当前索引对应的水果：{{@root.Fruits[@index]}}
{{/each}}

为什么你之前的写法无效？ #

拆解下你试过的错误写法：

• {{this.[Fruits].@index.this}}：完全不符合Handlebars语法规则，this指向当前循环项，嵌套逻辑混乱
• {{Fruits.@index.this}}：在each块内，当前上下文是someOtherList的项，Fruits不在这个上下文里，直接写Fruits会找不到变量
• {{Fruits.[@index]}}：同样没跳出当前each的上下文，Handlebars会在当前循环项里找Fruits，自然找不到

效果验证 #

假设someOtherList是和Fruits长度一致的数组（比如[1,2,3,4]），循环时：

• 第0次循环输出Apple
• 第1次循环输出Mango
• 以此类推，完全满足你“根据索引获取特定元素”的需求，而且不需要遍历Fruits数组本身。

内容的提问来源于stack exchange，提问作者bhaskarkh