Handlebars循环组件JSON结构优化：实现多图共享属性

我最近开始用Handlebars，现有如下HTML模板：

{{#each this.level3}}
<div class="expanded-view" data-cmp-src="{{data-cmp-src}}">
  <div class="d-flex justify-content-between heading">
    <h4>Heading that should be the same for all children</h4>
    <button>Likewise for button text</button>
  </div>
  <div class="d-flex flex-wrap content-panel">
    <figure class="l3-item">
      <a href="#"
        ><img class="content-square" src="{{imgSrc}}" alt="{{altText}}"
      /></a>
      <figcaption>{{caption}}</figcaption>
    </figure>
  </div>
</div>
{{/each}}

这是一个展示标题、按钮及带说明文字图片的基础组件。我通过JSON对象遍历项目，但当前JSON格式有误，只能展示单张图片及说明文字。我需要构建正确的JSON结构，让匹配data-cmp-src时能返回多张图片及说明文字，同时这些图片共享相同的标题、按钮文本和数据属性。data-bs-target和data-cmp-src用于关联元素选中时展示对应选项（逻辑在代码片段外处理）。

当前错误的JSON结构：

"level3": [{
{
  "heading": "Option 1 View heading",
  "btnText": "Option 1 View btn text",
  "data-bs-target": "#historyCollapseOneChild",
  "data-cmp-src": "historyL3Child",
  {
    "imgSrc": "../../assets/images/mega-menu/hegra.png",
    "caption": "the first image in view 1"
  },
  {
    "imgSrc": "../../assets/images/mega-menu/hegra.png",
    "caption": "the second image in view 2"
  },
    },
{
  "heading": "Option 2 View heading",
  "btnText": "Option 2 View btn text",
  "data-bs-target": "#historyCollapseOneChild",
  "data-cmp-src": "historyL3Child",
  {
    "imgSrc": "../../assets/images/mega-menu/hegra.png",
    "caption": "the first image in view 2"
  },
  {
    "imgSrc": "../../assets/images/mega-menu/hegra.png",
    "caption": "the second image in view 2"
  },
    }
]

1. 修正JSON结构 #

错误核心是直接在对象里嵌套图片对象，不符合JSON语法规范。正确做法是把每组图片放到一个数组属性（比如items）里，每组共享的标题、按钮文本等作为顶层属性，图片集合作为子数组：

"level3": [
  {
    "heading": "Option 1 View heading",
    "btnText": "Option 1 View btn text",
    "data-bs-target": "#historyCollapseOneChild",
    "data-cmp-src": "historyL3Child",
    "items": [
      {
        "imgSrc": "../../assets/images/mega-menu/hegra.png",
        "altText": "First image alt text",
        "caption": "the first image in view 1"
      },
      {
        "imgSrc": "../../assets/images/mega-menu/hegra.png",
        "altText": "Second image alt text",
        "caption": "the second image in view 1"
      }
    ]
  },
  {
    "heading": "Option 2 View heading",
    "btnText": "Option 2 View btn text",
    "data-bs-target": "#historyCollapseTwoChild",
    "data-cmp-src": "historyL3Child2",
    "items": [
      {
        "imgSrc": "../../assets/images/mega-menu/hegra.png",
        "altText": "First image alt text",
        "caption": "the first image in view 2"
      },
      {
        "imgSrc": "../../assets/images/mega-menu/hegra.png",
        "altText": "Second image alt text",
        "caption": "the second image in view 2"
      }
    ]
  }
]

2. 调整Handlebars模板 #

需要在遍历level3的基础上，嵌套遍历每个项里的items数组，才能渲染多张图片：

{{#each this.level3}}
<div class="expanded-view" data-cmp-src="{{data-cmp-src}}" data-bs-target="{{data-bs-target}}">
  <div class="d-flex justify-content-between heading">
    <h4>{{heading}}</h4>
    <button>{{btnText}}</button>
  </div>
  <div class="d-flex flex-wrap content-panel">
    {{#each this.items}}
    <figure class="l3-item">
      <a href="#"
        ><img class="content-square" src="{{imgSrc}}" alt="{{altText}}"
      /></a>
      <figcaption>{{caption}}</figcaption>
    </figure>
    {{/each}}
  </div>
</div>
{{/each}}

关键说明 #

• JSON里每个level3项是一个完整视图单元，包含共享的标题、按钮文本、数据属性，以及图片集合数组items
• 模板通过两层{{#each}}实现：第一层遍历视图单元，第二层遍历每个单元下的图片，批量渲染多张图片
• 替换了原模板中硬编码的标题和按钮文本，改为从JSON读取动态值，符合组件复用逻辑

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