Mustache usage Summary

Preface:

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.

2. Use mustache

The following describes how to use mustache. Before getting started, you need to obtain the relevant mustache. js file from git hub and create a new solution. The directory is as follows:

 

Then we can start to use jquery. 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:

 

[JavaScript]View plaincopy

1. $ (Function (){
2. VaR user = {name: "Olive", age: 23, sex: "girl "};
3. VaR template = "My name is {name}, I'm {age}, sex is {sex }}";
4. VaR view = mustache. Render (template, user );
5. $ ("# User_info" pai.html (View );

　　

LPage rendering effect:

 

 

LSyntax explanation:

I. the syntax of mustache is very simple. Just mark the field to be bound with two braces, "{{}}";

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

III. the main rendering method is mustache. render. This method has two parameters: 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:

[JavaScript]View plaincopy

1. VaR users = {result: [{name: "only", age: 24, sex: "boy "},
2. {Name: "for", age: 24, sex: "boy "},
3. {Name: "Olive", age: 23, sex: "girl "}
4. ]
5. };
6. 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> ";
7. VaR views = mustache. Render (template, users );
8. $ ("# Users_info" pai.html (Views );

LPage rendering effect:

 

LSyntax explanation:

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

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

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

 

2.3 null (false/undefined) object display

LSample Code:

[JavaScript]View plaincopy

1. VaR users = {result: [{Name: NULL, age: 24, sex: "boy "},
2. {Name: "for", age: 24, sex: "boy "},
3. {Name: "Olive", age: 23, sex: "girl "}
4. ]
5. };
6. 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> ";
7. VaR views = mustache. Render (template, users );
8. $ ("# Users_info1" pai.html (Views );

LPage rendering effect:

 

LSyntax explanation:

I. we have mentioned the syntax {{#}{/} above. In addition to 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 display.

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:

[JavaScript]View plaincopy

1. VaR user = {name: "
2. VaR template = "My name is {name }}";
3. VaR view = mustache. Render (template, user );
4. $ ("# User_name" pai.html (View); <span style = "line-Height: 1.5"> </span>

LPage rendering effect:

 

If you do not add & 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 we simply use the {} Method for binding, 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.

 

Http://blog.csdn.net/xuemoyao/article/details/17896203

Mustache usage Summary