Maintain responsive Flex properties when iterating arrays using Handlebars

Question

I have the following code (using Handlebars, working code from 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"
    }
  ]
}

Basically, it loops through the array of cards and creates a card-container div for each item. Then use bootstrap to assign a CSS class to each div, for example col-md-6 so that:

• Mobile: Items appear in a single column
• Tablets: Items appear in 2 columns
• Desktop: items displayed in 3 columns

This all works as expected and visually gives the desired UI (regardless of the number of cards): Example below:

However, as shown in the JSON, I need a property outside of the individual card level to determine whether the desktop should break from a 4-column layout to a 3-column layout.

I didn't want to repeat this property for every card in the card array, so reorganized my code as shown in my code snippet (using Handlebars): https://jsfiddle.net/stcfa5wh/20/< ;/p >

However, this now means that although I can access the 3columnLayout value: the HTML is dumped onto the page, and I can no longer use col in the way I do ;Done before.

For example, on a tablet, I could set each image-card to 50% width, but it ignores the need for rows.

Can anyone suggest a way to preserve the structure of the HTML while still implementing top-level attributes (e.g. 3columnLayout)?

Answer 1

I don't understand why you stopped using Bootstrap when you tried to implement the 3columnLayout flag. Using Bootstrap, we will create a 3 column layout using class col-lg-4 on each column. Therefore, the conditional expression we need for each column is: {{#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>