Handlebars嵌套数组首子数组与其余子数组差异化遍历及报错解决

你的代码报错主要有两个原因：一是标签闭合不完整（{{#if}}没有对应{{/if}}），二是内部遍历和变量引用逻辑错误。下面给出两种可行的解决方法：

方法一：修正模板内的循环与条件判断 #

直接在模板中利用Handlebars的@first标识区分首个子数组，同时修正变量引用和标签闭合问题：

{{#each array}}
  {{#if @first}}
    {{!-- 渲染第一个子数组（带image字段的对象） --}}
    {{#each this}}
      <p>{{this.id}}</p>
      <a href="index.html?id={{this.id}}&type=subcategories"><p>{{this.title}}</p></a>
      <a href="index.html?id={{this.id}}&type=subcategories"><img src="{{this.image}}"></a>
    {{/each}}
  {{else}}
    {{!-- 渲染其余子数组（带category_id字段的对象） --}}
    {{#each this}}
      <p>ID: {{this.id}} | 标题: {{this.title}} | 分类ID: {{this.category_id}}</p>
    {{/each}}
  {{/if}}
{{/each}}

关键修正点：

• 用{{#each this}}遍历当前子数组（而非错误的{{#each first}}）
• 遍历内部对象时，用{{this.id}}、{{this.image}}引用当前对象的属性（而非{{first.id}}）
• 补全{{/if}}标签，保证语法闭合
• 修正数据源中image字段与模板内img_url的不匹配问题

方法二：预处理数据拆分数组 #

在将数据传入模板前，先把第一个子数组和剩余子数组拆分，简化模板逻辑：

数据预处理（JS代码） #

// 假设原数组为array
const firstSubarray = array[0];
const restSubarrays = array.slice(1);

// 组装模板要用到的上下文数据
const templateData = {
  firstGroup: firstSubarray,
  otherGroups: restSubarrays
};

对应Handlebars模板 #

{{!-- 单独渲染第一个子数组 --}}
{{#each firstGroup}}
  <p>{{this.id}}</p>
  <a href="index.html?id={{this.id}}&type=subcategories"><p>{{this.title}}</p></a>
  <a href="index.html?id={{this.id}}&type=subcategories"><img src="{{this.image}}"></a>
{{/each}}

{{!-- 单独渲染剩余子数组 --}}
{{#each otherGroups}}
  {{#each this}}
    <p>ID: {{this.id}} | 标题: {{this.title}} | 分类ID: {{this.category_id}}</p>
  {{/each}}
{{/each}}

这种方式把逻辑拆分到数据处理阶段，模板结构更简洁，可读性更强。

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