This is the 8th day of my participation in the August Text Challenge.More challenges in August

In the last article we reviewed three ways to turn data into views, and you can see how it’s getting easier and more convenient for programmers to use, with Mustache template engine coming up and just going through{{}}You can do all the complicated things you did before. We now have more and more packaged libraries or engines, and the API documentation is very comprehensive. The average developer only needs to read the documentation to complete the basic development function, but there are so many answers on the Internet that they don’t seem to care how it is implemented. I think the steps of learning are generally divided into three steps: one is to use it, the other is to study its underlying principle, to know what it is, to know why it is, and the third is that they can achieve the function (personal point of view, do not like spray). We’re not trying to reinvent the wheel, which is a thankless task, but it’s always good to learn more.

Mustache’s Git address

Github.com/mustache/mu…

Because Mustache can be used in either a Node environment or a browser, we can also download it in BootcDN or NPM (UMD universal mode) :

BootCDN address:www.bootcdn.cn/mustache.js…

NPM download command: NPM install Mustache –save

Here is an example of copying mustache. Js source code in BootCDN and importing it in a file:

Simple data rendering

Example 1: Render each item of the array

<div id="container"></div> <script src=".. /mustache. Js "></script> <script> const data = {nameArr:[" Jack "," Jack "," Jack "]} const container = document.getElementById('container') const templateStr = ` <ul> {{#nameArr}} <li>{{.}}</li> {{/nameArr}} </ul> ` domStr = Mustache.render(templateStr,data) container.innerHTML = domStr </script>Copy the code

We use the{{#nameArr}}To start,{{/nameArr}}At the end, you don’t need to go through the for loop, and you don’t need to go throughnameArr[i]Get the index value of the array in this way.I can represent each of the items in the array. Mustache exposes a render function that takes two parameters, a render template and the data to fill in, and generates an HTML string that is rendered with.innerHTML.

The results are as follows:

Example 2: Rendering of Boolean values

   const data = {
      isShow: true
    }
    const container = document.getElementById('container')
    const templateStr = `
      {{#isShow}}
        hellow word
      {{/isShow}}
    `
    domStr = Mustache.render(templateStr,data)
    container.innerHTML = domStr
  </script>
  
Copy the code

If isShow is true, hellow Word will be displayed. Otherwise, hellow Word will not be displayed

Example 3: Prove that mustache is a light logic grammar

** if count = 10; We display the original value of count and the value of count * 2

  const data = {
      count: 10
    }
    const container = document.getElementById('container')
    const templateStr = `
      {{#count}}
        <h1>count = {{count}}</h1>
        <h1>count * 2 = {{count * 2}}</h1>
      {{/count}}
    `
    domStr = Mustache.render(templateStr,data)
    container.innerHTML = domStr
Copy the code

Let’s take a look at the results:

Musatche is a light logic syntax that cannot handle logic.

Rendering of complex data

Let’s go back to the example from Note 1 and implement the following with Mustache:

Const data = {infoArr: [{title: 'Swift ', name:' yaso ', address: 'Ionia ', const data = {infoArr: [{title:' Swift ', name: 'Yaso ', address:' Ionia ', const data = {infoArr: [{title: 'Swift ', name:' Yaso ', address: 'Ionia ', },{title: 'Blind Priest ', Address:' Ionia ', Address: '30% attack speed bonus ', qSkill: ESkill: eSkill: Echo Strike, wSkill: eSkill: eSkill: Echo Strike, rSkill: 'Chinese Football ', }] } const container = document.getElementById('container') const templateStr = ` {{#infoArr}} <div class="item_box"> < h1 > {{title}} < / h1 > < h2 > name: {{name}} < / h2 > < h2 > location: {{address}} < / h2 > < ul > < li > passive: {{passive}} < / li > < li > q: {{qSkill}} < / li > < li > w: {{wSkill}} < / li > < li > e: {{eSkill}} < / li > < li > r: {{rSkill}}</li> </ul> </div> {{/infoArr}} ` const domStr = Mustache.render(templateStr,data) container.innerHTML = domStrCopy the code

We can see mustache going straight{{# data source}}{{/ data source}}To replace theThe for loop.{{attribute name}}Replaced theThe ${} syntax sugar

You know, I don’t really get the benefit of mustache at this point, because it doesn’t seem too different from the back quotes. But what about deeper levels of nesting, such as arrays nested within arrays:

For example, there is a member information table, which records students’ names and hobbies, but it is not possible to have only one hobby, so hobbies are also represented by an array:

Let’s have a look at mustache:

Const data = {info: [{name: "zhang", like: [" swimming ", "travel"]}, {name: "Li Si ", like:" basketball ", "Soccer"]}} const container = document.getelementById ('container') const templateStr = '{{#info}} <div Class ="item_box"> <h2> {{name}}</h2> <ul> {{#like}} <li>{{.}}</li> {{/like}} </ul> </div> {{/info}} ` const domStr = Mustache.render(templateStr,data) container.innerHTML = domStrCopy the code

This situation can be particularly tedious if you use a for loop instead of mustache. It can be done, but the above example is just a simple array of arrays. If the data is particularly complex, the template engine will be more convenient. Just {{#key}}{{.}}{{/key}}.