Conserver les propriétés Flex réactives lors de l'itération de tableaux à l'aide de guidons

Question

J'ai le code suivant (en utilisant guidons, code de travail de JSFiddle) :

<div class="cards-container">
    {{#each this.cards}}
    <div
      class = "conteneur de carte conteneur-col-inner col-12 col-md-6 col-lg-3"
    >
      <div class="image-card">
        <div class="contenu de l'image">
          <p class="titre">{{titre}}</p>
        </div>
      </div>
    </div>
    {{/chaque}}
  </div>

{
  "3columnLayout": faux,
  "cartes": [
    {
      "titre" : "Carte 1"
    },
    {
      "titre" : "Carte 2"
    },
    {
      "titre" : "Carte 3"
    }
  ]
}
Fondamentalement, il parcourt le tableau de cartes et crée un card-container Utilisez ensuite bootstrap pour attribuer une classe CSS à chaque div, par exemple col-md-6 afin que 

Mobile : les éléments apparaissent dans une seule colonne
Tablettes : les éléments apparaissent dans 2 colonnes
Bureau : éléments affichés dans 3 colonnes

Tout cela fonctionne comme prévu et donne visuellement l'interface utilisateur souhaitée (quel que soit le nombre de cartes) : Exemple ci-dessous : 

Cependant, comme indiqué dans le JSON, j'ai besoin d'une propriété en dehors du niveau de la carte individuelle pour déterminer si le bureau doit passer d'une disposition à 4 colonnes à une disposition à 3 colonnes. 
Je ne voulais pas répéter cette propriété pour chaque carte du tableau de cartes, j'ai donc réorganisé mon code comme indiqué dans mon extrait de code (à l'aide de guidons) : https://jsfiddle.net/stcfa5wh/20/< ; /p>
Cependant, cela signifie désormais que même si je peux accéder à la valeur 3columnLayout : le code HTML est transféré sur la page et je ne peux plus utiliser col comme je le fais ; Fait avant. 
Par exemple, sur une tablette, je pourrais définir chaque image-card sur une largeur de 50 %, mais cela ignore le besoin de lignes. 
Quelqu'un peut-il suggérer un moyen de préserver la structure du HTML tout en implémentant les attributs de niveau supérieur (par exemple 3columnLayout) ? 
            

Answer 1

Je ne comprends pas pourquoi lorsque vous essayez d'implémenter 3columnLayout 标志时停止使用 Bootstrap。使用 Bootstrap，我们将在每列上使用类 col-lg-4 pour créer une mise en page à 3 colonnes. Par conséquent, l'expression conditionnelle dont nous avons besoin pour chaque colonne est : {{#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>