Skip to main content

Code Example: Handlebar.js Templates

Written by Michelle Mitchell

Here's how to make a PDF with Handlebar.js HTML templates:

<html>
  <head>
    <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js%22></script" target="_blank" rel="nofollow noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script</a>>
    <script src='<a href="https://dl.dropboxusercontent.com/u/243251/handlebars-v4.0.5.js'></script" target="_blank" rel="nofollow noopener noreferrer">https://dl.dropboxusercontent.com/u/243251/handlebars-v4.0.5.js'></script</a>>
    <script id="entry-template" type="text/x-handlebars-template">
      <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
          {{body}}
        </div>
      </div>
    </script>
  </head>
  <body>
  </body>
    <script>
      var source   = $("#entry-template").html();
      var template = Handlebars.compile(source);
      var context = {title: "My New Post", body: "This is my first post!"}
      var html    = template(context);
      document.body.innerHTML = html;
    </script>
 
</html>

Did this answer your question?