Handlebars very simple example

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="handlebars.js@*" data-semver="1.3.0" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>

    <script id="cities-template" type="text/x-handlebars-template">
    
      {{#cities}}
          <h3>{{name}}</h3>
          <p><strong>Description: </strong>{{description}}</p>
          <hr>
      {{/cities}}
    
    </script>
    
    <div id="cities-placeholder"></div>
    
    <script src="script.js"></script>
  </body>

</html>

// Get Template with HTML & Handlebars syntax
var citiesSource = $("#cities-template").html();

// Compile (package) HTML & Javascript
var citiesTemplate = Handlebars.compile(citiesSource);

var data = {
  cities: [
    {
      id: "toledo",
      name: "Toledo",
      description: "Lorem ipsum dolor sit amet, quod nibh mei ne, mei at admodum temporibus, cum recteque maiestatis ut."
    },
    {
      id: "franciscobeltrao",
      name: "Francisco Beltrão",
      description: "Lorem ipsum dolor sit amet, quod nibh mei ne, mei at admodum temporibus, cum recteque maiestatis ut."
    },
    {
      id: "patobranco",
      name: "Pato Branco",
      description: "Lorem ipsum dolor sit amet, quod nibh mei ne, mei at admodum temporibus, cum recteque maiestatis ut."
    }
  ]
};

// Output (get) compiled template & data
$("#cities-placeholder").html(citiesTemplate(data));