Slide 22 - JavaScript Templates - Example § Session 10

JavaScript Templates - Example

We'll focus on using the Handlebars template library. Other template systems will do similar things though, with different syntax.

With Handlebars, the key parts are:

Write a Mustache template

Load the Mustache JavaScript library

Compile the template using Handlebars

Evaluate the template, passing in the data

Add the result of the processed template to the page

Handlebars syntax are based on double curly braces, like {{ handlebar expression }}.

So to iterate through the <code>seasons</code> array, our Handlebars template would look like:

<ul> {{#seasons}} <li>{{.}}</li> {{/seasons}} </ul>

To re-implement our "seasons list" example using Handlebars, we could something like:

	<!DOCTYPE>
	<html lang="en">
	<head>
	<title>List of Seasons Using jQuery</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous"></script>
	<style>
	#seasons_container {
	border: medium solid green;
	background-color: #efe;
	}
	.handlebars { display: none; }
	</style>
	<script>
	$(document).ready(function() {
	$.getJSON("seasons.json",
	function (data) {
	var mysource = $('#seasons_template').html();
	var mytemplate = Handlebars.compile(mysource);
	var myresult = mytemplate(data)
	$('#seasons_container').html(myresult);
	});
	});
	</script>
	</head>

	<body>
	<h1>Seasons</h1>
	<div id="seasons_container">
	Seasons List goes here.
	</div>
	<div id="seasons_template" class="handlebars">
	<ul>
	{{#seasons}}
	<li>{{.}}</li>
	{{/seasons}}
	</ul>
	</div>
	</body>

	</html>

view raw handlebars-seasons.html hosted with ❤ by GitHub

The Mustache template is defined in Lines 32-38.
This template iterates through the seasons array

{{#seasons}} starts the iteration
{{/seasons}} ends the iteration
Within the loop, {{.}} refers to item of the array

Note that the template is marked as display: none; by CSS. There are other ways to include templates, which we'll discuss a bit later.

Line 11. Load jQuery for Ajax request and DOM manipulations. We're using the jQuery CDN here.

Line 12. Load Handlebars JS library from the cdnjs.com service.

Line 15. Here we define the URL we'll get our seasons list from.

Line 18. Use jQuery to make the Ajax request, and set the callback function to process the data

Line 20. Get the template source (uses jQuery to select the #seasonslisttemplate and get the html

Line 21. Use Handlebars to compile the template. This makes the template ready to process. Under the hood, the compile step turns our {{ handlebars template }} into JavaScript code.

Line 22. Evaluate the template, passing in the data. The evaluation will return the markup generated.

Line 23. Add the results of the template evaluation to the page. Note here we are using jQuery.

See the working examples: