Explore how to use the Javascript template engine mustache. js _ javascript skills

This article mainly introduces the Javascript template engine mustache. js usage, mustache. js is a simple and powerful Javascript template engine. It can be used to simplify html writing in js Code. After compression, it is only 9KB, which is very worthy of use in projects, for more information about 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));

Obviously, we can see the syntax of the Mustache template. You only need to include {And}, and put the object name in it.

In this example, we can also see that if the specified attribute is a function, the content in the function is not output, but the function is executed first and then the returned result is displayed.

Do not escape HTML tags

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

Through this example, we can see that Mustache will escape the html tag in the value by default, but sometimes we do not need.

So here we can use {And} to include, or {And} to include, so Mustache will not convert the html tag in.

Bind the value of the 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 you see the first example, someone will think about whether or not to bind the sub-attribute. If you try to see it. Congratulations! Now you are solving your needs. You only need to use the sub-attribute through.

Conditional select whether to render the specified part

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

The problem persists. If we still need to be able to decide whether to render a part based on the value we have given, we can solve this problem now, of course, the prompt is not only false, but will not render the specified part.

Null, empty array, 0, empty string is equally valid. The syntax above is relatively simple, that is, using {# key}... {/key} to control the intermediate content.

Loop output

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

You just learned the above method. You have solved it most of the time, but there will still be troubles, that is, loop output. If you write one by one, I believe it will be annoying, of course, Mustache won't disappoint us. It also shows how to output cyclically. Here we output an array composed of objects. If we output an array, you need to use {{.}} to replace {name }}.

Cyclic output specifies the value returned after the function is processed.

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

Loop output is available, but we still want to process it later. So this fully meets your needs, because Mustache will pass the values in the array to your function and output the values returned by your function. Here we can see that the outermost layer is an array. As long as the function is used in it, the outer array will be passed as the parameter of this function.

Custom Functions

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

As we use variables as the section above, what will happen if we use functions as the Section now.

It will call the function returned by our function and take the original string in the Section as the first parameter, and the default interpreter as the second parameter, so we can process it on our own.

Antsense 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 we make up for it.

If we use {^ and} to define the section, the Section will only be displayed when the value is null, null, empty array, and null string. Then we can implement the if else effect.

Some templates

var view = { names: [ { "name": "y" }, { "name": "z" }, { "name": "f" } ]};var base = "Names{{#names}}{{>user}}{{/names}}";var name = "{{name}}";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 with each other, which can also be cumbersome.

So here we also want to introduce how to define some templates for use in other templates. Here, Other templates are used only by {> templetename }}.

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

Pre-compiled Template

Mustache. parse (template); // other code Mustache. render (template, view );

Templates have both advantages and disadvantages. It takes time to compile the template, so we can compile the template in advance if we know that a template will be used for later use.

I hope this article will help you learn more.