An Introduction to Mustache.js

May 30, 2017

As you may know, we recently built a THIRTEEN Explore app for Amazon’s Fire TV using their Web App Starter Kit. The app is built in JavaScript, and uses the templating engine Mustache.js to generate content and display information in the app. Here, I’ll explain some of the benefits of working with Mustache, and will provide a basic introduction to the language.

One of the defining features of Mustache is that it is logic-less. If you’ve worked with a more forgiving templating language, such as erb, this can be a little tricky to get used to at first. In another language, you might have been able to truncate data or apply some light logic to it in your view, but doing so will break your template in Mustache– any kind of logic or data massaging must be completed before the data makes it to the view. However, if you work in an MVC structure (which many of us are today), maintaining this separation of concerns and keeping as much logic out of the view as possible is best practice anyway, and incredibly important for performance and the sustainability of apps. Therefore, it’s a big advantage that Mustache.js is so unforgiving; not only does it reinforce an already highly-regarded best practice but it also declutters your views, makes your code infinitely more readable, and makes modifying your app or transitioning to another templating engine a lot easier.

In our Fire TV app, we made many calls to a variety of APIs and sent the returned data through Mustache.js templates to create the many views the app contains. Here, I’ll demonstrate via a simplified example using one of PBS’ most popular programs, Sherlock, how to get started with Mustache.js. Note that the workflow and methods laid out in this blog post only demonstrate one way of working with Mustache.js–as is usually the case, there are certainly different ways you could go about doing the same thing!

Here, I have a simple HTML file, linking to jquery, Mustache.js, and to my JavaScript file that contains my data. There’s also my Mustache template contained in a script and denoted by the type attribute x-templ-mustache.

As you can see, the Mustache template is syntactically fairly straightforward. The template, which I’ve called, very imaginatively, template, renders the data properties you want to display inside its tags (the curly brackets) into your HTML. Here, I plan on rendering the first name, last name, address, and occupation properties, among others, for my Sherlock character inside a list with an id that is the character’s. I’ll also drop the image path associated with the character into an empty image tag.

In my JavaScript file, I have my data in an object, sherlockCharacters, with a variety of properties, and a call to render the Mustache template in my HTML file. The mustache template is called with Mustache.render (although you could also call this with Mustache.to_html), and the contents of the template and the data are passed to this call– the result is a snippet of HTML populated with our properties’ values. We save this to a variable output. The last step is to insert this dynamically generated HTML into our page, which we can do by calling the .html() method on element of the page that will contain this new content ($(‘#char-info’)), and passing output to it.

The result is a page with my one character on it:

Like many other templating engines, Mustache also allows you to iterate through collections, but that’s about as logic-heavy as it gets. Here, I’ve added to my sherlockCharacters object, and have put my characters into an array called people.

I can just as easily send that to my Mustache template, and, for each ‘person’, create a new list with that character’s id. Here, I iterate through my collection people, opening my loop with {{#people}} and closing it with {{/people}}. You could also achieve the same thing with {{#each people}} and {{/each}}–it’s a personal choice.

This results in the following page:

If you know you are going to display every single property or attribute piece of data contains, you can simply use the tag {{.}} while iterating over a collection instead of having to denote every property. Another aspect of Mustache.js that came in handy in our app was calling .length on a Mustache tag to get the number of objects in a collection, just as you would in many other programming languages, but that’s really the extent of its logic capabilities.

These examples are relatively simple compared to some of the work and heavy-liftting Mustache can do in a large-scale, fully-fledged web-app, but the basic syntax and capabilities of Mustache.js do not get much more complicated than this! If you are interested in learning more about Mustache.js, or implementing it your own web app, the github page for Mustache.js has lots of terrific examples of this language in use and some tips for getting started