使用 Handlebars 迭代數組時保持響應式 Flex 屬性

Question

我有以下程式碼（使用 Handlebars，JSFiddle 中的工作程式碼）：

<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>

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

基本上，它會遍歷卡片數組並為每個項目創建一個card-container div。然後使用 bootstrap 為每個 div 分配一個 CSS 類，例如 col-md-6，以便：

• 行動裝置：項目顯示在單一欄位中
• 平板電腦：項目顯示在 2 欄
• 桌面：項目顯示在 3 欄

這一切都按預期工作，並在視覺上給出了所需的 UI（無論卡片數量如何）：下面的示例：

但是，如 JSON 中所示，我需要位於單一卡片層級之外的屬性，以確定桌面是否應從 4 列佈局中斷為 3 列佈局。

我不想為卡片數組中的每張卡片重複此屬性，因此重組了我的程式碼，如我的程式碼片段所示（使用Handlebars）：https://jsfiddle.net/stcfa5wh/20/< ;/p >

但是，這現在意味著雖然我可以訪問3columnLayout 值：HTML 會轉儲到頁面上，並且我不能再以我的方式使用col ;以前做過。

例如，在平板電腦上，我可以將每個image-card 設定為 50% 的寬度，但它忽略了行的需要。

任何人都可以建議一種既保留 HTML 結構又能夠實現頂級屬性（例如 3columnLayout）的方法嗎？

Answer 1

我不明白為什麼當您嘗試實作 3columnLayout 標誌時停止使用 Bootstrap。使用 Bootstrap，我們將在每列上使用類別 col-lg-4 來建立 3 列佈局。因此，我們每列所需的條件式為：{{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}} .

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>