Mustache.js is an open source logic-less template system. This doesn’t mean you can only have simple placeholders in a template, but the features are pretty limited to some intelligent tags (i.e. array iteration, conditional rendering, etc). Mustache provides templates and views as the base for creating dynamic templates. Views contain the data to be included in the templates as JSON. Templates contain the presentation HTML or data with the template tags for including view data.
Tags are indicated by the double mustaches that surround them. {{username}} is a tag, as is {{#username}}. In examples, we refer to username as the tag's key. A mustache template can contain any number of mustache tags. Look at the below example.
The most basic mustache type is the variable. A {{name}} tag in a template and mustache engine will try to find the name key in the current context. If there is no name key in the current context, the parent contexts will be checked recursively. If the top context is reached and the name key is still not found, nothing will be rendered.
All variables are HTML escaped by default. If you want to return un-escaped HTML, use the triple mustache: {{{name}}}.
a) Binding JS variables -
Let say we have a javascript variable and we want to bind it to a template. As your variable won’t have a key, you need to say “just bind the data”.
When you want to bind js variables in mustache use dot (
. ) operator, this will get you the value.
JsFiddle
b) Binding with JSON Data -
Consider you have written rest API which returns you a JSON object and you want to render the template. To do so check this fiddle.
Sections - Polymorphism Behaviour
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 pound and ends with a slash. The text between the two tags is referred to as that section's "block".
The behavior of the section is determined by the value of the key .
Syntax-
{{#.}}
binding
{{/.}}
Thumb Rule -
- If the key is of type boolean (true/false) - Mustache checks if the value is True and if so it will render.
- If key is of type collection, then mustache will loop over collections and the block will be rendered one or more times.
a) Case 1 - False Values or Empty Lists
If the
activeusers key does not exist, or exists and has a value of null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered.
Data
{
"activeusers": false
}
OR
{
"activeusers":[]
}
OR
{
"activeusers":null
}
Template
Shown.
{{#activeusers}}
Never shown!
{{/activeusers}}
Output
Shown
b) Case 2- Non-Empty Lists -
If the person key exists and is not null, undefined, or false, and is not an empty list the block will be rendered one or more times. When the value is a list, the block is rendered once for each item in the list. The context of the block is set to the current item in the list for each iteration. In this way, we can loop over collections.
Data
{
"activeusers": [
{ "name": "Moe" },
{ "name": "Larry" },
{ "name": "Curly" }
]
}
Template
{{#activeusers}}
{{name}}
{{/activeusers}}
Output
Moe
Larry
Curly
When looping over an array of strings, a . can be used to refer to the current item in the list.
Example
Data
{"activeusers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]}
Template
{{#activeusers}}
* {{.}}
{{/activeusers}}
Output
* Athos
* Aramis
* Porthos
* D'Artagnan
JsFiddle
Conditional Statements - If-Else
An inverted section opens with {{^section}} instead of {{#section}}. The block of an inverted section is rendered only if the value of that section's tag is null, undefined, false, false or an empty list. Let's take a look at below example.
Data
{
"UserloggedIn":false
"username":null
}
Template
{{#UserloggedIn}}{{username}}{{/UserloggedIn}}
{{^UserloggedIn}}Welcome Guest({{/UserloggedIn}}
Output
Welcome Guest
JsFiddle
Please do Comment,Like and Subscribe
