<p>我有以下代码（使用 Handlebars，JSFiddle 中的工作代码）：</p> <pre class="brush:php;toolbar:false;"><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></pre> <pre class="brush:php;toolbar:false;">{ "3columnLayout": false, "cards": [ { "title": "Card 1" }, { "title": "Card 2" }, { "title": "Card 3" } ] }</pre> <p>基本上，它会遍历卡片数组并为每个项目创建一个<code>card-container</code> div。然后使用 bootstrap 为每个 div 分配一个 CSS 类，例如 <code>col-md-6</code>，以便：</p> <ul> <li>移动设备：项目显示在单列中</li> <li>平板电脑：项目显示在 2 列中</li> <li>桌面：项目显示在 3 列中</li> </ul> <p>这一切都按预期工作，并在视觉上给出了所需的 UI（无论卡片数量如何）：下面的示例：</p> <p>但是，如 JSON 中所示，我需要一个位于单个卡级别之外的属性，以确定桌面是否应从 4 列布局中断为 3 列布局。</p> <p>我不想为卡片数组中的每张卡片重复此属性，因此重组了我的代码，如我的代码片段所示（使用 Handlebars）：https://jsfiddle.net/stcfa5wh/20/</p > <p>但是，这现在意味着虽然我可以访问 <code>3columnLayout</code> 值：HTML 会转储到页面上，并且我不能再以我的方式使用 <code>col</code>以前做过。</p> <p>例如，在平板电脑上，我可以将每个<code>image-card</code> 设置为 50% 的宽度，但它忽略了行的需要。</p> <p>任何人都可以建议一种既保留 HTML 结构又能够实现顶级属性（例如 <code>3columnLayout</code>）的方法吗？</p>

const template = Handlebars.compile(document.getElementById('Template').innerHTML);

const data = {
  "3columnLayout": true,
  "cards": [{
      "title": "Card 1",
    },
    {
      "title": "Card 2",
    },
    {

      "title": "Card 3",

    },
    {
      "title": "Card 4",

    },
    {
      "title": "Card 5",
    },
    {

      "title": "Card 6",
    },
    {
      "title": "Card 7",
    },
    {
      "title": "Card 8",
    }
  ]
}

const output = template(data);

document.getElementById('Output').innerHTML = output;

.image-card {
  height: 432px;
  background-color: lightblue;
  border: 1px solid;
  margin-bottom: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script id="Template" type="text/template">
  <div class="container">
    <div class="row">
      {{#each this.cards}}
        <div class="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>
  </div>
</script>
<div id="Output"></div>