Tech blog to share information.

May 10, 2018

Client Side Templating - Getting Started with Mustache.js

May 10, 2018 Posted by tj cool , , No comments

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.

Defining Template

An often seen solution is to put all the templates within "script" tags with an alternative type attribute, e.g. type=" text/template”. Some common MIME types are text/html , text/template and text/mustache. You can include as many templates in a document as you wish with different IDs. Heres the quick example -


Mustache Tags: {{}}

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.

Defining Variables :

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


Mustache.js Documentation -


Please do Comment,Like and Subscribe  


0 comments: