Handlebars模板无法循环items数组问题排查求助

既然已确认传入模板的items是有效数组，问题大概率出在上下文作用域或模板语法细节上，以下是具体排查点和解决办法：

1. 检查上下文作用域是否正确 #

如果模板外层嵌套了{{#if}}、{{#with}}等块级语法，当前上下文会被切换，直接写{{#each items}}会找不到根级的items数组。

解决办法：

• 用@root直接访问根上下文：

  {{#each @root.items}}
    <div>商品：{{name}}，数量：{{quantity}}，价格：{{price}}</div>
  {{/each}}
  

• 若嵌套层级明确，通过父级上下文跳转：

  {{#with orderInfo}}
    {{#each ../items}}
      <div>商品：{{name}}，数量：{{quantity}}，价格：{{price}}</div>
    {{/each}}
  {{/with}}
  

2. 验证模板语法是否完整 #

确认{{#each}}标签有没有正确闭合{{/each}}，遗漏闭合标签会导致Handlebars解析失败，循环直接失效。

错误示例：

{{#each items}}
  <div>商品：{{name}}</div>
<!-- 缺少{{/each}} -->

正确示例：

{{#each items}}
  <div>商品：{{name}}，数量：{{quantity}}，价格：{{price}}</div>
{{/each}}

3. 核对数组元素的属性名 #

模板中引用的属性名（如name、quantity）必须和items数组元素的属性名完全一致，Handlebars对大小写敏感。

比如你的items数据是：

const items = [
  { productName: "纯棉T恤", buyCount: 2, unitPrice: 99 },
  { productName: "休闲牛仔裤", buyCount: 1, unitPrice: 199 }
];

那模板里就不能写{{name}}，必须对应写{{productName}}，否则会显示空值，看起来像循环没生效。

4. 调试上下文内容 #

可以在模板中临时插入日志代码，查看控制台输出的items具体内容，确认是否能正确访问：

{{log items}} <!-- 查看当前上下文的items -->
{{log @root.items}} <!-- 查看根上下文的items -->
{{#each @root.items}}
  <div>商品：{{name}}</div>
{{/each}}

如果以上方法仍未解决问题，建议提供完整模板代码和items数据结构示例，以便精准定位问题。

内容的提问来源于stack exchange，提问作者Emanuel Rojas Agüero