Handlebars 'each' block helper and json file

by Will Moody

 With the static website boilerplate which is here I have found that I can use Handlebars.js with its built in each block helper and a json file to simply create and edit various elements of a page.

The process in fairly straight forwards, say your wish to create a testimonials section which works as a carousel.

With slick- carousel already loaded as a dependency, it's simply a case of adding the correct html with the each block helper and then linking to the correct json file.

This is the carousel html:-

extract of index.html

      <div class="testimonials">
        {{#each index.testimonials}}
        <div>
          <p>{{testimonial}}</p><small>{{small}}</small>
        </div>
        {{/each}}
      </div>

And then in the data directory is the index.json file which looks like this:- 

index.json

{
    "testimonials": [
        {
            "testimonial": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "small": "Will, August 2018"
        },
        {
            "testimonial": "Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh.",
            "small": "Linda, October 2018"
        },
        {
            "testimonial": "Dis parturient montes nascetur ridiculus. Lectus arcu bibendum at varius vel pharetra vel turpis. Risus pretium quam vulputate dignissim suspendisse in est.",
            "small": "Sam, May 2017"
        },
        {
            "testimonial": "Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh.",
            "small": "Carmen, December 2018"
        },
        {
            "testimonial": "Ipsum consequat nisl vel pretium lectus quam id leo in. Ut faucibus pulvinar elementum integer enim. Habitant morbi tristique senectus et netus. Lobortis feugiat vivamus at augue.",
            "small": "Ivy, March 2018"
        },
        {
            "testimonial": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "small": "Ava, June 2018"
        },
        {
            "testimonial": "Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh.",
            "small": "Bryony, March 2017"
        },
        {
            "testimonial": "Dis parturient montes nascetur ridiculus. Lectus arcu bibendum at varius vel pharetra vel turpis. Risus pretium quam vulputate dignissim suspendisse in est.",
            "small": "Harry, August 2017"
        }
    ]
}

and of course in the main.js is the slick carousel jquery:-

extract of main.js

import 'slick-carousel';

$('.testimonials').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 8000,
  arrows: false,
  dots: false,
  infinite: true,
  speed: 1000,
  fade: true,
  cssEase: 'linear',
});

What happens is that Handlebars.js iterates through the index.json file on build giving a section of loaded html as below:-

extract of index.html once compiled

      <div class="testimonials">
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><small>Will, August 2018</small>
        </div>
        <div>
          <p>Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh.</p><small>Linda, October 2018</small>
        </div>
        <div>
          <p>Dis parturient montes nascetur ridiculus. Lectus arcu bibendum at varius vel pharetra vel turpis. Risus pretium quam vulputate dignissim suspendisse in est.</p><small>Sam, May 2017</small>
        </div>
        <div>
          <p>Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh.</p><small>Carmen, December 2018</small>
        </div>
        <div>
          <p>Ipsum consequat nisl vel pretium lectus quam id leo in. Ut faucibus pulvinar elementum integer enim. Habitant morbi tristique senectus et netus. Lobortis feugiat vivamus at augue.</p><small>Ivy, March 2018</small>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><small>Ava, June 2018</small>
        </div>
        <div>
          <p>Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh.</p><small>Bryony, March 2017</small>
        </div>
        <div>
          <p>Dis parturient montes nascetur ridiculus. Lectus arcu bibendum at varius vel pharetra vel turpis. Risus pretium quam vulputate dignissim suspendisse in est.</p><small>Harry, August 2017</small>
        </div>
      </div>

From here you can see it is very simple to edit the index.json file to add or remove testimonials.

I have found this method works really well for images in a gallery with the 'src' and 'alt' for the image as json items, or for that matter anywhere where multiple items that follow the same format are required.

Hope this has been of some help.