Explore how to use Javascript template engine mustache.js_javascript skills

We will explain in detail how to use Mustache.js lightweight JavaScript template engine.

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. You only need to use {{ and }} to include it, and put the name of the object inside.

It can also be seen from this example that if the specified attribute is a function, the content in the function will not be output. Instead, the function will be executed first, and then the returned result will be 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));

As you can see from this example, Mustache will escape the html tags in the value by default, but sometimes we don't need it.

So here we can use {{{ and }}} to include it, or {{ and }} to include it, then Mustache will not escape the html tags inside.

Bind the value of the sub-property

var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

I believe that when you see the first example, someone will think about whether you can bind sub-properties, if you work hard to read it. So congratulations, now is the way to solve your needs, just use the sub-property through .

Conditional selection of whether to render the specified part

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

There are always problems. If we still need to be able to decide whether to render a certain part based on the value we give, then we can solve this problem now. Of course, we also need to remind you that it is not just false that will cause the specified part not to be rendered. .

null, empty array, 0, empty string are equally valid. The syntax is relatively simple, just use {{#key}} ... {{/key}} to control the content in the middle.

Loop output

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

Just learn the above method, and you will solve most of the problems, but there will still be trouble, which is the loop output. If you write one by one, I believe it will be very irritating. Of course, Mustache will not let us down, it also It shows how to loop the output. Here we output an array composed of objects. If we output an array, we need to use {{.}} instead of {{name}}.

Loop and output the value returned after processing by the specified function

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

The loop output is available, but we still want to process it later. Then this completely meets your needs, 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. As long as a function is used inside, the outer array will be passed in as a parameter of this function.

Custom function

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

We all used variables as sections above, so what will be the effect if we use functions as sections now?

It will call the function returned by our function, taking the original string in the middle of the section as the first parameter, and the default interpreter as the second parameter, then we can process it ourselves.

Antonym Festival

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

We also used sections above, but we can only choose whether to output a certain part. So here we make up for it.

If we use {{^ and }} to define a section, then this part will only be displayed when the value inside is empty, null, empty array, or empty string. Then we can achieve the effect of if else.

Some templates

var view = {
 names: [
 { "name": "y" },
 { "name": "z" },
 { "name": "f" }
 ]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

Although Mustache saves a lot of time, we have defined a lot of templates, but they cannot be nested and used in each other, which also makes it cumbersome.

So here we also introduce how to define some templates for use in other templates. The way to use other templates here is just {{>templetename}}.

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

Precompiled templates

Mustache.parse(template);
//其他代码
Mustache.render(template,view);

Templates have advantages and disadvantages. It just takes time to compile the template, so if we know that we will use a certain template, we can pre-compile the template for later use.

I hope this article will be helpful to everyone’s learning.