Exploring JavaScript template engine Mustache.js usage _javascript tips

We'll take a detailed mustache.js lightweight JavaScript template engine usage.

Simple example

function Show (t) {
 $ ("#content"). HTML (t);
var view = {
 title: ' Yzf ',
 cacl:function () {return
 6 + 4;
 }
};
$ ("#content"). HTML (Mustache.render ("{{title}}} spends {CAcl}}", view);

You can clearly see the syntax of the mustache template, just use {{and}} to include the name of the object.

This example also shows that if the specified property is a function, the contents of the function are not output, but the function is executed first, and then the returned results are displayed.

Do not escape HTML tags

var view = {
 Name: "Yzf", company
 : "<b>ninesoft</b>"
};
Show (Mustache.render (' {{name}} <br/> {{company}} <br/>{{{company}}}<br/>{{&company}} ", view) );

This example shows that mustache will escape the HTML tag in the value by default, but sometimes we don't need it.

So here we can use {{{and}}} to be included, or {{and}} contained, then mustache will not escape the HTML tags inside.

The value of the bound child property

var view = {
 "name": {
 A: "Y",
 Second: "ZF"
 },
 "Age":
};
Show (Mustache.render ("{{Name.first}}{{name.second}}}", view);

Believe that when you see the first example, someone will think about binding the child properties, if you try to look down. So congratulations, now is the way to solve your needs, just through. To use child attributes.

Conditional Select whether to render the specified part

var view = {
 person:false
};
Show (Mustache.render ("eff{{#person}}abc{{/person}", view));

The problem is always constant, and if we still need to be able to decide whether or not to render a part based on the value we give, then we can solve the problem now and, of course, the hint is that not only false will cause the specified part not to be rendered.

NULL, an empty array, 0, is as valid as an empty string. The syntax is simpler, using {{#key}}} ... {{/key}} to control the middle content.

Loop output

var view = {
 Stooges: [
 {' name ': ' Moe '},
 {' name ': ' Larry '},
 {' name ': ' Curly '}
 ]
};
   show (Mustache.render ("{{#stooges}}{{name}}<br/>{{/stooges}", view));

Just learn the way it is, and most of the places you've solved, but there will be trouble in the place, is the circular output, if you write one, I believe that will be very upset, of course, mustache will not let us down, it also gives a way to cycle output, here is an array of objects composed of the output, If we output an array, we need to use the {{.}} To replace the {{name}}.

Circular output The value returned after the specified function is processed

var view = {"
 beatles": [
 {"FirstName": "Johh", "LastName": "Lennon"},
 {"FirstName": "Paul", "LastName": "M Ccartney "}
 ],
 " name ": function () {return
 this.firstname + this.lastname;
 }
};
Show (Mustache.render ("{{#beatles}}{{name}}<br/>{{/beatles}}", view));

The loop output is there, but we also want to process it later. So this is exactly what you need, because mustache will pass the values in the array to your function and output the value returned by your function. Here we can see that the outermost layer is an array, and as long as the function is used inside the outer array is passed as an argument to the function.

Custom functions

var view = {
 "name": "Tater",
 "bold": function () {return
 function (text, render) {return
   render (Tex T) + "<br/>";
}}} Show (Mustache.render ("{{#bold}}{{name}}{{/bold}}", view));

We are all using the variable as a section, then we now use the function as a section, what will be the effect.

It calls the function returned by our function, takes the original string in the middle of the section as the first argument, the default interpreter as the second parameter, then we can process it ourselves.

Anti-semantic Section

var view = {
 "repos": []
};
Show (Mustache.render ("{{#repos}}{{.}}} {{/repos}}} {{^repos}}no Repos{{/repos}} ", view);

We also use the section above, but we can only choose whether to output a part. So here's a fix.

If we use the {{^ and}} to define the section, then this part will only appear when the value in it is empty, null, an empty array, an empty string. Then we can implement the effect of if else.

Partial templates

var view = {
 names: [
 {' name ': ' Y '},
 {' name ': ' Z '},
 {' name ': ' F '}
 ]
};
var base = " 
 

Mustache Although save a lot of time, but we have defined a lot of templates, but can not be nested with each other to use, can also create tedious.

So here we also want to explain how to define some of the templates that are used in other templates, where the other templates are used only {{>templetename}}.

The biggest difference is that the Mustache.render method has a third parameter.

Pre-compiling templates

Mustache.parse (template);
Other code
Mustache.render (Template,view);

Since the template is good, there are disadvantages. It takes time to compile the template, so we can compile the template in advance to use it later if we know we'll use a template.

I hope this article will help you to learn.