handlebars_example4.js

<script>
  document.addEventListener("DOMContentLoaded", function() {
 
	//Get the contents
	var source = document.querySelector("#results-template").innerHTML;
		
	//Compile them into a template
	template = Handlebars.compile(source);

	// add the formatName helper
        Handlebars.registerHelper("formatName", function(fname, lname) {
          return fname + " " + lname.substr(0,1)+'.';
        });

        // add the userName helper
        Handlebars.registerHelper("userName", function(fname, lname) {
          return fname.substr(0,1).toLowerCase() + lname.toLowerCase();
        });
 
 	// on click of #demobutton, populate values and display template
	document.querySelector("#demoButton").addEventListener("click", 
	function() {

		var fname = document.querySelector("#firstname").value;
		var lname = document.querySelector("#lastname").value;
				
		var things = document.querySelector("#things").value;
		if(things.length) var arrThings = things.split(",");
	 
	 		// html is an array of "things" objects
			var html = template({firstname:fname, lastname:lname, things:arrThings});
			document.querySelector("#resultDiv").innerHTML = html;
 
	});
  });
</script>