I just completed a fairly short but very informative course on Handlebars through PluralSight. The course, by Ryan Lewis, is called “JavaScript Templating with Handlebars”, and I would highly encourage those who are interested in learning a strong templating framework to take it. It covers Handlebars, but also dives into some great best practices that include using tools like Bower and Gulp, Modular Template Patterns, and using Handlebars with Node.
Anyway, here’s a very simple templating example using Handlebars!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> </head> <body> <div id="Main"></div> <script> // Define the template // Templates are really just strings var stringTemplate = "<div>Hello {{name}}</div>"; // Compile the template // This returns a templating function var compiledTemplate = Handlebars.compile(stringTemplate); // Invoke the templating function with the appropriate data // This returns a string that contains the rendered template var renderedTemplate = compiledTemplate({name: 'Smik'}); // Retrieve the element which you intend to inject the string into // In our case this string contains HTML var targetElement = document.getElementById("Main"); // Inject the string into the target element targetElement.innerHTML = renderedTemplate; </script> </body> </html>