Boiler Plate

HTML

<!-- do this in the head -->
<script src="handlebars.min.js"></script>
<script id="foo" type="text/x-handlebars-template">
  <p>{{bar}}</p>
</script>

<!-- do this in the body -->
<div id="thingIWantToChange"></div>

JS

const source = document.getElementById('foo').innerHTML;
 
const template = Handlebars.compile(source);
 
const context = {
  bar: 'Text of the paragraph element'
};
 
const compiledHtml = template(context);

// SELECT
const body = document.getElementById('thingIWantToChange');
body.innerHTML = compiledHtml;

Other

if

{{#if ifName}}
...
{{else}}
...
{{/if}}

// SELECT

const context = {
	ifName: true
};

// set the innerHTML

each

Used to loop through an array and basically repeat the contents.

Think lots of the same thing with modifications based on the array.

This is an object, thus it will loop through each object.

{{#each someArray}}
  <p>{{this}} is the current element!</p>
{{/each}}

const context = {
  someArray: ['First', 'Second', 'Third'] 
}

{{#each someArray}}
  <p>The current shape is: {{this.shape}}!</p>
{{/each}}

const context = {
  someArray: [
    {shape: 'Triangle'},
    {shape: 'Circle'},
    {shape: 'Square'}
  ] 
}