Handlebars Simple Example

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <!--Content div is used to render the compile code of handlebar -->
  <div id="content"></div>
  
  <!-- note the type attribute of script tag. Without this, code will be treated as javascript code -->
  <script id="template1" type="text/x-handlebars-template">
    <div>
      Hi,This template is rendered using<b> {{templateEngine}}</b>.<br> 
      Take a look at script.js to understand the example better.<br><br>
      
      HTML code will be rendered as it without the execution<br>
      {{italicText}}<br><br>
      
      <b>To explicitly execute the html code without escaping ,we just have to add one more curly brace</b>
      {{{italicText}}}
    </div>
  </script>
  
</body>

</html>

//refer following link for the more information on handlebar
//https://ui-tech-blogs.blogspot.in/2016/08/quick-introduction-to-handlebars.html

$(document).ready(function(){
  //json data for handlebar template
  var data = {templateEngine:"Handlebar",
              italicText:"<i>This text should be in italics</i>"
  };
  
  //handlebar template html
  var template = $("#template1").html();
  
  //handlebar's compile method returns special function which can be used to get final html
  var compiledCode = Handlebars.compile(template);
  
  //json data is passed top compiled code and result will be html
  var result = compiledCode(data);
  
  //compiled html can be rendered in document
  $("#content").html(result);
});

/* Styles go here */