Mustache usage Summary

Mustache usage summary:

This front-end rendering template was used in a previous project. At that time, I was very busy and didn't have time to summarize it. This lightweight rendering template was used in the project last week, I really feel very useful, so I would like to sum up my experience. It is an entry-level guide.

1. mustache Overview

Mustache is a javascript-based template engine similar to jquery template. However, this template is more lightweight and easier to use with simpler syntax.

2. Detailed use of mustache

The usage of mustache is described in detail below. Before getting started, you must first obtain the relevant mustache. js file from git hub and create a solution after obtaining the file. The folder is as follows:

 

Then we start to use jquery in detail. First, we need to reference jquery in the head label of the page. JS and mustache. the two Javascript script files mainly have the following aspects (the methods demonstrated below are all included in the script code block in the head tag ):

2.1 simple object binding presentation

LSample Code:

 

$(function () {            var user = { name: "Olive", age: 23, sex: "girl" };            var template = "My name is  {{name}} ,I‘m  {{age}} ,Sex is {{sex}}";            var view = Mustache.render(template, user);            $("#user_info").html(view);

　　

LPage rendering effect:

 

 

LSyntax explanation:

I. the syntax of mustache is very easy. You can use two braces to mark the field to be bound, "{{}}";

II. The field name in the braces must be consistent with the attribute name of the object in the second batch in the mustache. Render method.

III. the basic rendering method is mustache. render. This method has two workers. The first is the template to be rendered, that is, the template in the previous example, and the second is the data source, that is, the user object in the previous example.

 

2.2 circular rendering of object arrays

LSample Code:

 var users = { result: [{ name: "Only", age: 24, sex: "boy" },                                   { name: "for", age: 24, sex: "boy" },                                   { name: "Olive", age: 23, sex: "girl" }                                   ]            };            var template = "<div><table cellpadding=0 cellspacing=0 class=‘tb‘ ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";            var views = Mustache.render(template, users);            $("#users_info").html(views);

LPage rendering effect:

 

LSyntax explanation:

I. the object data mustache also has a special Syntax: {{#}}{{/}. If the given data source is an object array, this syntax can be used, it is very convenient for loop display.

II. The {{#}} mark indicates that all content after the mark should be displayed cyclically.

Iii. {/} indicates the end of the loop. This case is mostly used for displaying table rows.

 

2.3 deduce that the object is null (false/undefined)

LSample Code:

  var users = { result: [{ name: null, age: 24, sex: "boy" },                                  { name: "for", age: 24, sex: "boy" },                                   { name: "Olive", age: 23, sex: "girl" }                                  ]            };            var template = "<div><table cellpadding=0 cellspacing=0 class=‘tb‘ ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{#name}}{{name}}</td><td>{{age}}</td><td>{{sex}}{{/name}}</td></tr>{{/result}}</table><div>";            var views = Mustache.render(template, users);           $("#users_info1").html(views);

LPage rendering effect:

 

LSyntax explanation:

I. in the above section, we have talked about the syntax {{#}{/}. Apart from the loop traversal above, it also has another meaning that it is null, if the value in {{#}} is null, false, or undefine, the content in the tag is not displayed.

II. In the sample code, the first object in the users object is named null. Therefore, this user information is not displayed during the presentation.

Iii. Of course, the opposite method {^} is available for empty determination. The meaning of this method is opposite to that.

2.4 prevent HTML Escape display

LSample Code:

var user = { name: "
LPage rendering effect:
 
If & is not added in {}, the effect is as follows:
 
LSyntax explanation:
I. in some cases, the data source we want to bind may have some HTML tags. If a simple token is bound in the form of {}, the HTML Tag will be escaped by default. To prevent the content in the bound field from being transferred, we can do this {&} to prevent escaping.


Well, I will summarize it here today, hoping to help you.
Mustache usage Summary