Mustache use of experience summary of the front page rendering template

Summary of mustache use experience Preface:

In a previous project, it was useful to use this foreground rendering template, at that time very busy also have no time to sum up, just last week in the project and use this lightweight type of rendering template, really feel very good, so summed up the use of experience, is an entry level of guidance. 1. Mustache Overview

Mustache is a modular engine based on JavaScript, similar to the jquery Template, but the template is lighter, more simple and easy to use. 2. Specific use of mustache

Here is a specific talk about the use of mustache. Before you start, you need to get the relevant mustache.js files from the Git hub, and after you get the files, create a new solution that looks like this:

Then start specific use, first of all, you need to refer to the Jquery.js and mustache.js two script files within the head tag of the page, mainly in the following ways (the following methods are shown in the script block in the head tag): 2.1 Simple Object Binding exhibition Shows

L code example:

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

　　

L Page Rendering effect:

L Grammar Explanation:

I. Mustache's syntax is very simple, with two curly braces to mark the field to bind, "{{}}";

The field names within the curly braces are consistent with the property names of the objects in the second argument in the Mustache.render method

Iii. the main rendering method is Mustache.render, the method has two parameters, the first is to render the template, that is, the template in the example above, the second is the data source is the user object in the example above

2.2 Object array Loop rendering display

L code example:

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);

L Page Rendering effect:

L Grammar Explanation:

I. For object data mustache also has its special syntax: {{#}}{{/}}, if the given data source is an array of objects, you can use this syntax, convenient to loop the display.

Ii. where the {{#}}} tag indicates that everything from this tag will be recycled

The iii. {{/}} tag indicates the end of the loop. This situation is used for the display of table rows.

2.3 Judge object is null (false/undefined) show

L code example:

  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);

L Page Rendering effect:

L Grammar Explanation:

I. Above we have a syntax for {{#}}{{/}}, except for the loop traversal above, it has another layer of meaning is the null, if the value in {{#}}} is null or FALSE or undefine the content inside its markup does not show

Ii. in the code example, the first object in the Users object is named NULL, so the user information is not displayed at the time of presentation.

Iii. there is a method of sentencing, of course, the opposite of this method {{^}}, which means the opposite of the meaning of {{#}}. 2.4 Prevent HTML escape display

L code example:

var user = {name: "
 
L Page Rendering effect:


If not added to {{}}, the effect is as follows:


L Grammar Explanation:

I. At some point, there may be some HTML tags in the data source that we are binding, and the default will be to escape the HTML tags if you bind them in this way simply by {{}}. In order to prevent the contents of the bound field from being shifted we can do so {{}}, which prevents escaping.



Well, today is summed up here, I hope to give you some help.