Detailed explanation of how to use the lightweight JavaScript template engine mustache.js

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, just use {{ and }} Just include it and put the name of the object in it.

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, but the function will be executed first, and then the returned result will be displayed.

Not escaping HTML tags

var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

Through this example, we can see that Mustache will encode the html tags in the value by default. Escaped, but sometimes we don't need it.

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

Bind the value of sub-attribute

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

I believe that when seeing the first example, someone will think about whether it can Binding subproperties, if you bother 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 part, then this problem can be solved now. Of course, it should be noted that it is not just false that will cause the specified part not to be rendered.

null, empty array, 0, and 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, you will solve most of the problems, but you will still have troubles The place is 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 gives a way to loop output. Here is an array composed of objects. If we output is an array, you need to use {{.}} instead of {{name}}.

Loop output is 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 now we use functions as sections, will What effect does it have.

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 Section

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

We also use 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.

Partial Templates

var view = {
 names: [
 { "name": "y" },
 { "name": "z" },
 { "name": "f" }
 ]
};
var base = "<h2 id="Names">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 many templates, but they cannot interact with each other. Nested use will also cause cumbersomeness.

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 template

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.

The above is the detailed content of Detailed explanation of how to use the lightweight JavaScript template engine mustache.js. For more information, please follow other related articles on the PHP Chinese website!