Behalten Sie reaktionsfähige Flex-Eigenschaften bei, wenn Sie Arrays mithilfe von Handles iterieren

Question

Ich habe den folgenden Code (unter Verwendung von Handlers, Arbeitscode von 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>
    {{/jede}}
  </div>

{
  "3columnLayout": false,
  "Karten": [
    {
      "Titel": "Karte 1"
    },
    {
      "Titel": "Karte 2"
    },
    {
      "Titel": "Karte 3"
    }
  ]
}

Im Grunde durchläuft es das Karten-Array und erstellt für jedes Element einen card-container Verwenden Sie dann Bootstrap, um jedem Div eine CSS-Klasse zuzuweisen, zum Beispiel col-md-6

• Mobil: Elemente werden in einer einzelnen Spalte angezeigt
• Tabletten: Elemente erscheinen in 2 Spalten
• Desktop: Elemente werden in 3 Spalten angezeigt

Das alles funktioniert wie erwartet und ergibt optisch die gewünschte Benutzeroberfläche (unabhängig von der Anzahl der Karten): Beispiel unten:

Wie im JSON gezeigt, benötige ich jedoch eine Eigenschaft außerhalb der einzelnen Kartenebene, um zu bestimmen, ob der Desktop von einem 4-Spalten-Layout zu einem 3-Spalten-Layout wechseln soll.

Ich wollte diese Eigenschaft nicht für jede Karte im Karten-Array wiederholen, also habe ich meinen Code wie in meinem Code-Snippet gezeigt neu organisiert (mithilfe von Handlers): https://jsfiddle.net/stcfa5wh/20/< ; /p>

Das bedeutet jetzt jedoch, dass, obwohl ich auf den Wert 3columnLayout zugreifen kann, der HTML-Code auf der Seite abgelegt wird und ich col nicht mehr verwenden kann So wie ich es mache. Vorher erledigt.

Zum Beispiel könnte ich auf einem Tablet jede image-card auf 50 % Breite einstellen, aber es ignoriert die Notwendigkeit von Zeilen.

Kann jemand eine Möglichkeit vorschlagen, die Struktur des HTML beizubehalten und gleichzeitig Attribute der obersten Ebene zu implementieren (z. B. 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>