Getting started with Mustache.js now available on learnable.com

JavaScript-Templating

Learnable LogoIn my first screencast with Learnable, I cover the basics of Mustache.js, a popular client-side JavaScript templating library.

A Subsidiary of the well-known SitePoint brand, Learnable.com has been an independent course platform since 2010. They have a catalog of over 4,000 videos, covering a wide range of technology-specific topics. Learnable’s web site is well organized and easy to navigate. They work with highly-respected professionals who create short videos and long-form courses. The content is top-notch and well-produced.

Mustache LogoIn this video, I cover the basics of Mustache.js. You’ll learn how to include mustache.js in your web page, creating HTML templates, rendering an HTML template with data, as well as rendering a list of values in a template. There are code-examples included with the video as well, in case you want to follow-along and edit the code as you watch.

Here is a link to the Learnable.com Video Page: https://learnable.com/hub/play/79

Many Thanks to Erica Wass and Angela Molina from Learnable for so much help in making this first screencast a success!

 

How Do I Create “if not” logic in my Mustache.js JavaScript Template?

JavaScript-Templating

Mustache.js LogoMustache.js provides a simple, yet powerful way to populate one piece of HTML many times with a data set. In this article, we’ll learn how to specify markup that will be rendered when there is an absence of data.

In an earlier post: “Mustache.js – The Absolute Basics“, we learned how easy it is to leverage Mustache.js for simple, yet powerful client-side templating. In that article, we saw that you can use your template to check and see if a data point has a value, and if so, render some markup.

But what if a “row” of data is missing one or more of its parts? In that case, we might want to render some specific markup that says “no data found”. When using Mustache.js, this is accomplished by using the following set of characters: {{^foo}}no data!{{/foo}}, where “foo” is our data point. Then, when Mustache.js sees that “foo” does not exist, or has a “falsy” value, it will render whatever HTML we put inside of the two specified tags. In this case, it would be the text: “no value!”.

In this way, we can create an “if not” logic, in which we are saying: “if there is no foo, or if foo is ‘falsy’, then render ‘no value!’.

Example # 1

In Example # 1, we have the data object that will be used in our template. Make note that not every user in the array has the same amount of data. Some people are missing either “region”, “phone” or “email”. This is important because we will introduce logic into our template that acts upon the absence of data.

Example # 2

In Example # 2, we have the HTML template that we will use with Mustache.js. You’ll notice that other than “name”, every data point is represented twice. First, there is an “if” condition, which is wrapped with these two tags: {{#foo}}Foo: {{foo}}{{/foo}}. What is being expressed here is: “if there is a value for the “foo” dataPoint, then show it. Then there is an “if not” condition wrapped with these two tags: {{^foo}}No Foo!{{/foo}}. In this case, Mustache.js is being told: If there is no value for “foo”, show this HTML.

Example # 3

In Example # 3, we have code that is virtually identical to that which we used in the Mustache.js basics article. First, we get a reference to our template: div#template, and then we use the Mustache.render method to fill the “output” variable with markup that has been populated with our data. Finally, we simply append this markup to the element with the “.box” class.

Here is a JS Fiddle link for our completed working example: http://jsfiddle.net/pg886/

Mustache.js – The Absolute Basics

JavaScript-Templating

Mustache.js LogoIf you’ve been writing client side code for more than 15 minutes, you have likely had to consume and present JSON data. This is becoming a common scenario for front-end web developers.

The problem is that in most cases, you are inserting the return values into the same markup. So this means that you might be writing your own for-loops and element creation functions. But even with the help of the mighty jQuery, this can get tedious. More importantly, you are likely writing the same code more than once, each time customizing it for the specific situation. Well, regardless of the details, if this even partially describes some of the challenges you have faced lately, then it is likely that a client-side templating solution is needed.

Enter Mustache.js

Mustache.js is a lightweight JavaScript library that provides client-side templating. The feature-set is intentionally small. While some may see this as a drawback, I agree with their approach. The footprint is so small, that it is really a non-issue when it comes to considering the additional HTTP request (and you can, of course, concatenate it to your main JS file if you so choose). Websites such as Twitter, CNN and eBay, Inc. have turned to this JavaScript library, which is a testament to its power and usefulness.

The syntax is pretty simple

TEMPLATE = Your HTML code with {{VALUE}} placeholders
DATA = Your JSON Data

Example # 1

Here is the fully-working JSFiddle.net link for Example # 1: http://jsfiddle.net/MsuPp/

In Example # 1, we call the render() method, which is a static member of the Mustache object. This method takes two arguments: the templated markup and the JSON data. This is not the most efficient way to utilize the method, but it is a good way to demonstrate how simple it is. Just create your HTML wtih the {{tag}} syntax where you want your output, and provide some data. Then use jQuery to append the return value of this method call to the element with the id of “container”.

Example # 2

Here is the fully-working JSFiddle.net link for Example # 2: http://jsfiddle.net/WhxMa/2/

Mustache.js spares you the headaches of writing the same JSON iteration / DOM creation code over and over with each project.

In Example # 2, we use a slightly more advanced approach. First, note the SCRIPT tag with the id of “template”. Instead of giving the type attribute a value of “text/javascript”, we use type=”text/html”. Since this makes no sense to the browser, the text node inside of the SCRIPT tags is ignored. But at the same time, that same text is available to us, so it is a great place to store template markup.

Inside of this SCRIPT tag, we have the opening and closing {{#cities}}{{/cities}} placeholders. This is used as a loop. What it does is tell Mustache.js: “Hey for each one of the elements in the ‘cities’ array, populate the markup accordingly.” So, Mustache.js iterates over that same markup for each element in the “cities” array, and inserts the value of cities[“name”] where the {{name}} placeholder appears.

Summary

These example are very basic and there is much more to dive into with Mustache.js. My hope is that this post has provided an overview that, at minimum, helps you to begin understanding and implementing this library.

Helpful Links for Mustache.js

https://github.com/janl/mustache.js/

http://mustache.github.com/

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-using-the-mustache-template-library/

http://www.youtube.com/results?search_query=Mustache.js