Front-end HTML Templating using handlebars

Binding html and data-manually can be a repetive job, shifting between html and js, design and scripting.Handlebars allows for embedding placeholder to create this seperation.

<template id="quotetemplate">
<figure class="bg-gray-100 rounded-xl p-8">
  <div class="pt-6 text-center space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        {{quote}}
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
		{{author}}
      </div>
      <div class="text-gray-500">
       {{designation}}
      </div>
    </figcaption>
  </div>
</figure>

var html = document.querySelector("#quotetemplate").innerHTML;
var template = Handlebars.compile(html);
var data = {quote : "Well, Hello World !", author: "John Doe" , desigation: "Software Developer"}
document.body.insertAdjacentHTML("beforeend", template(data));



Writing the same for an array of data.



....
var template = Handlebars.compile("{{#each author}}" +  html + "{{/each}}");
var data = { author: [{quote : "Well, Hello World !", author: "John Doe" , desigation: "Software Developer"},
            {quote : "Well, Hello Again !", author: "Jane Doe" , desigation: "Manager"}
           ]};
document.body.insertAdjacentHTML("beforeend", template(data));