本文讲解如何利用 handlebars 的 `lookup` 辅助函数与 `@index` 数据变量，实现在单次 `{{#each}}` 循环中同步访问多个同长度数组的对应元素，从而正确生成含“标题+旧值+新值”的对比表格。

在 Handlebars 模板中，{{#each}} 默认仅作用于当前上下文（如 header 数组），无法直接访问同级的其他数据（如 previous 或 current）。若想让每一行

同时显示 header[i]、previous[i] 和 current[i]，必须借助 Handlebars 内置的 {{lookup}} 辅助函数——它支持根据动态路径和索引从任意对象或数组中取值。

关键点在于：

• @index 是 {{#each}} 循环内置的数据变量，表示当前迭代项的数组下标（从 0 开始）；
• ../previous 表示向上一级作用域查找 previous 数组（因 {{#each header}} 将上下文切换为 header 元素，需用 ../ 回退）；
• {{lookup ../previous @index}} 等价于 JavaScript 中的 previous[@index]，实现按索引安全取值。

以下是完整可用的模板代码：

    {{#each header}}
      
    {{/each}}
  

  

    

      

      
BEFORE
      
AFTER
    
  
  

        
{{this}}
        
{{lookup ../previous @index}}
        
{{lookup ../current @index}}
      

⚠️ 注意事项：

• 三个数组（header、previous、current）必须长度一致，否则 lookup 在越界时返回 undefined，渲染为空单元格；
• lookup 是 Handlebars 4.0+ 内置辅助函数，低版本需手动注册或升级库；
• 若数组项为对象（如 {name: 'Jason'}），可组合使用：{{lookup (lookup ../previous @index) 'name'}}；
• 避免在模板中进行复杂逻辑判断；如需容错（例如某数组缺失），建议预处理数据或封装自定义 helpe

  

  r。

此方案简洁、声明式强，无需修改 JavaScript 数据结构，也无需嵌套循环，是 Handlebars 中多数组对齐渲染的标准实践。