Mustache is an open source logic-less template engine developed for languages such as JavaScript, Ruby, Python, PHP, Java and many more. It’s a very lightweight, readable syntax with a comprehensive specification. Mustache can be used for HTML, config files, and source code. It works by expanding tags in a template using values provided in a hash or object. You can use Mustache to render templates anywhere include client side and server side environments.

Why it’s “logic-less”?

Mustache doesn’t rely on procedural statements, there are no if statements, else clauses, or for loops. Mustache templates are entirely defined with tags.

How Mustache template works

Generally speaking, Mustache templates are essentially straight HTML, except that they contain special tags used for injecting your data into the HTML. Data is stored in JSON and YAML. The number of ways you can inject data is limited by design for simplicity and maintainability, but can be enhanced through the use of helpers.

The difference between JSON and YAML

If you are not familiar with JSON (JavaScript Object Notation), it is a minimal, human readable format for structuring data which used primarily to transmit data between a server and web application. YAML (YAML Ain’t Markup Language) uses line and whitespace delimiters instead of explicitly marked blocks that could span one or more lines like JSON. YAML is superset of JSON, a YAML parser can understand JSON not the other way around.

Let’s start with simple example

A typical Mustache template

Hello {{name}}
  You live in the {{place}}!
  {{#Robot}}
  Well, you are friends with {{creature}}
  {{/Robot}}

Given the following data

{
    "name": "Pinocchio",
    "place": "woods",
    "Robot": true,
    "creature": "animals"
  }

Will produce the following

Hello Pinocchio
  You live in the woods!
  Well, you are friends with animals

Tags

Basic
Tags are indicated by the double curly braces. {{Robot}} is a tag, as is{{#Robot}}. In both examples, Robot as the key or tag key.

Variables
All variables are HTML escaped by default. If you want to return unescaped HTML, use

  • the triple curly braces: {{{Robot}}} or
  • double curly braces with ampersand {{& name}}

Sections
Sections render blocks of text one or more times, depending on the value of the key in the current context. A section begins with a hashtag and ends with a slash.

{{#Robot}}
    My name is Pinocchio!
  {{/Robot}}

The behavior of the section is determined by the value of the key.

{
    "Robot": true
  }

Output

My name is Pinocchio!

Inverted Sections
An inverted section begins with a caret (hat) and ends with a slash.

{{^Robot}}
    No content!
  {{/Robot}}
  
  {
    "Robot": false
  }

Output

No content!

Partials
Partials begin with a greater than sign, like {{> Robot}}. Recursive partials are possible to avoid infinite loops. They also inherit the calling context.

base.mustache:

Names
  {{#Robot}}
    {{> user}}
  {{/Robot}}

user.mustache:

{{name}}
{
    "Robot": true,
    “name”: My name is Pinocchio
  }

Output

My name is Pinocchio

Comment
To insert comment, use double curly braces with exclamation mark {{! this is a comment }}

Summary

Template engines and frameworks are important in managing complex systems with dynamically changing presentation views. Mustache.js provides a well documented template system which can be used to manage your templates. We explored Mustache tags such as variables, sections, and partials, now it’s time for you to try on your own project. You can find a comprehensive guide to mustache tags on the mustache GitHub page. Enjoy!

Jessie Wang, Senior frontend developer

Written by Jessie W.

“I have no special talent, I am only passionately curious.“— Albert Einstein

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s