使用Handlebars遍历数组时，如何结合顶层属性保留响应式Bootstrap布局？

原Handlebars代码 #

<div class="cards-container">
  {{#each this.cards}}
  <div
    class="card-container container-col-inner col-12 col-md-6 col-lg-3"
  >
    <div class="image-card">
      <div class="image-content">
        <p class="title">{{title}}</p>
      </div>
    </div>
  </div>
  {{/each}}
</div>

对应JSON数据 #

{
  "3columnLayout": false,
  "cards": [
    {
      "title": "Card 1"
    },
    {
      "title": "Card 2"
    },
    {
      "title": "Card 3"
    }
  ]
}

问题背景 #

原本代码通过遍历cards数组生成带Bootstrap col类的卡片容器，实现了移动端单列、平板双列、桌面3列的响应式布局。现在需要通过顶层的3columnLayout属性控制桌面端显示3列或4列，且不想在每个card对象中重复该属性。之前重构后虽能访问到该属性，但HTML结构异常，导致col类无法正常生效（比如平板端50%宽度设置失效，忽略行布局需求）。需要在保留原有HTML结构的前提下，实现用顶层属性控制布局的需求。

解决方案 #

核心是在{{#each}}循环内通过../访问顶层属性，动态生成对应桌面端列类，同时完全保留原有HTML结构。

重构后的Handlebars代码 #

<div class="cards-container">
  {{#each this.cards}}
  <div
    class="card-container container-col-inner col-12 col-md-6 {{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}}"
  >
    <div class="image-card">
      <div class="image-content">
        <p class="title">{{title}}</p>
      </div>
    </div>
  </div>
  {{/each}}
</div>

关键说明 #

• 在each循环内部，../3columnLayout可以回到顶层上下文（JSON根对象），获取布尔属性值，无需在每个card对象中重复该字段。
• 通过{{#if}}条件判断动态切换桌面端列类：
  • 当3columnLayout为true时，用col-lg-4实现3列布局（12栅格÷4=3列）
  • 当3columnLayout为false时，用col-lg-3实现4列布局（12栅格÷3=4列）
• 移动端col-12、平板端col-md-6的设置完全保留，原响应式行为不受影响。
• 整体HTML结构和原代码一致，不会破坏Bootstrap的行-列布局规则，确保各断点的宽度设置正常生效。

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