Object JavaScript – External Templates Using Mustache, jQuery

As you have seen in Templates Rendering JSON Using Mustache, jQuery, you can put reusable HTML into a template and then have that template render your data. You are separating the data and providing one or more ways it can be displayed inside of a page.

This post extends what you have learned about Mustache and gives an example on how you can put your template into an external file. Once in an external file, you can use it across your site whenever you need data displayed in a particular way.

You can render Mustache template directly on your HTML page. Let’s start with the following example from the previous post.

	<body>
	<div class="main-content">
	<h1>All Products</h1>
	<div id="sampleArea"></div>
	</div>

	<script id="productTmpl" type="text/template">
	Products:
	<ul>
	{{#products}}
	<li>{{name}} {{category}} {{price}}</li>
	{{/products}}
	</ul>
	</script>
	<script src="Scripts/jquery-2.0.2.min.js"></script>
	<script src="Scripts/mustache.js"></script>
	<script>
	var data = {};
	$.getJSON(
	"Data/products.txt",
	function (d) {
	data = d;
	var template = $("#productTmpl").html();
	var html = Mustache.to_html(template, data);
	$('#sampleArea').html(html);
	}
	);
	</script>
	</body>

view raw

ojs-mustachejQueryData.html

hosted with ❤ by GitHub

A template is put into the HTML DOM using the script tag of type text/template.

Then in the we just call jQuery.getJSON() to retrieve the JSON from a file. Next, retrieve the template using jQuery.html(). You pass the template and data into Mustache which converts the result into html that you can attach to a place on your page.

External Template

You can take the code inside the script template and put it in its own file, typically in a Templates folder.

Create a file named productsList.mustache.html in a Templates folder. In productsList.mustache.html type the following code.

	<!– Templates/productsList.mustache.html –>
	Products:
	<ul>
	{{#products}}
	<li>{{name}} {{category}} {{price}}</li>
	{{/products}}
	</ul>

view raw

ojs-productsList.mustache.html

hosted with ❤ by GitHub

The code is not very fancy. You can certainly make it more elaborate, but the idea is for Mustache to take the data in products, and put each product.name, product.category, and product.price into a list item.

You can remove the script template from the HTML, because you can now get the template using jQuery.

Loading the Data and External Template

We need to change the way we load the template. The code to load the data is the same.

Then in the success part of getJSON, you get the template using jQuery.get(). The callback for that method receives a variable called template which contains all the external template you stored in the file.

Mustache.render function takes two parameters:

The Mustache template
A view object (our template) that contains the data and code needed to render the template.

Mustache.render(template, productsData) combines the template with the productData. You can call Mustache.render instead of Mustache.to_html() because we are not passing in a JavaScript variable, you’re passing in HTML.

Your code looks like this:

$.getJSON(
   'data/products2.txt', {},
   function (productsData, textStatus, jqXHr) {
     $.get('templates/productsList.mustache.html',
     function (template, textStatus, jqXhr) {
       var productHtml = Mustache.render(template, productsData);
       $('#products').append(productHtml);
     });
   });

});

You can then append the HTML to your products element as you did before.

Sample Code

Here is the sample code for loading a template and data from files:

In Data/Products2.txt:

Templates/productsList.mustache.html

	Products:
	<ul>
	{{#products}}
	<li>{{name}} {{category}} {{price}}</li>
	{{/products}}
	</ul>

view raw

ojs-template.html

hosted with ❤ by GitHub

In MustacheWithExternalTemplate.html

	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery loads External Mustache Template</title>
	</head>
	<body>
	<h3>Default Header</h3>
	<div id="products"></div>

	<script src="Scripts/jquery-2.0.2.js"></script>
	<script src="Scripts/mustache.js"></script>

	<script>
	$(document).ready(function () {
	$.getJSON(
	'data/products2.txt', {},
	function (productsData, textStatus, jqXHr) {
	$.get('templates/productsList.mustache.html',
	function (template, textStatus, jqXhr) {
	var productHtml = Mustache.render(template, productsData);
	$('#products').append(productHtml);
	});
	});
	});
	</script>
	</body>
	</html>