如何在 Handlebars 中通过 #each 同时遍历多个数组并渲染表格？_网络技术

如何在 Handlebars 中通过 #each 同时遍历多个数组并渲染表格？

发布时间 - 2026-01-31 00:00:00 点击率：次

本文讲解如何利用 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}}

	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'}}；
避免在模板中进行复杂逻辑判断；如需容错（例如某数组缺失），建议预处理数据或封装自定义 helper。

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

# javascript # java # 作用域 # 封装 # 循环 # 数据结构 # undefined # 对象 # tr # 多个 # 自定义 # 如需 # 仅作 # 为空 # 中取 # 单元格 # 需用 # 迭代

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：马蜂窝春节大数据：“春节旅游目的地”热度大涨253%，超长假

下一篇：Laravel Console 表格列宽控制：自定义截断与替

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：马蜂窝春节大数据：“春节旅游目的地”热度大涨253%，超长假

下一篇：Laravel Console 表格列宽控制：自定义截断与替