mustache syntax

mustache template, used to construct html page content. In actual work, when you want to call different functions in the same template to render the screen, you can manually judge the parameters passed in when rendering the page, provided that they have been customized. [When it is difficult to judge, we can make a judgment by changing the incoming parameters] Let me take a look at the syntax of this template with Xiaobai. Mustache’s template syntax is very simple, just a few:

{{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{ Use the Demo to give a brief introduction to the grammar:

1 ... 2 34b71d4dca0bef2a033161a097f3707f2cacc6d41bbb37262a98f745aa00fbf0 3 4ec11beb6c39d0703d1751d203c17053 4 var data = { 5 "name": " xiaohua " , 6 "msg" : { 7 "sex": " female ", 8 "age": " 22 " , 9 "hobit": " reading " 10 }, 11 "subject": ["Ch","En","Math","physics" ] 12 } 13 14 var tpl = 'e388a4556c0f65e1904146cc1a846bee {{name}}94b3e26ee717c64999d7867364b1b4a3' ; 15 var html = Mustache.render(tpl, data); 16 17 alert ( html ); 18 2cacc6d41bbb37262a98f745aa00fbf0 19 ... {{data}} {{}} is the identifier of Mustache. The data in the curly brackets represents the key name. The function of this sentence is to directly output the key value matching the key name, for example:

1 var tpl = '{{name}}' ; 2 var html = Mustache.render(tpl, data); 3 // 输出： 4 xiaohua {{#data}} {{/data}} Start with # and end with / to represent a block. It will render the block one or more times based on the key value in the current context. For example, rewrite the tpl in the Demo:

1 var tpl = '{{#msg}} e388a4556c0f65e1904146cc1a846bee{{sex}},{{age}},{{hobit}}94b3e26ee717c64999d7867364b1b4a3 {{/msg}}' ; 2 var html = Mustache.render(tpl, data); 3 4 // 输出： 5 e388a4556c0f65e1904146cc1a846bee female, 22, reading94b3e26ee717c64999d7867364b1b4a3 Note: If the data value in {{#data}} {{/data}} is null, undefined, false; no content will be rendered or output.

{{^data}} {{/data}} This syntax is similar to {{#data}} {{/data}} , except that it only renders and outputs the block content when the data value is null, undefined, or false.

1 var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}; 2 var html = Mustache.render(tpl, data); 3 // 输出： 4 没找到 nothing 键名就会渲染这段 {{.}} {{.}} represents an enumeration, which can output the entire array in a loop, for example:

1 var tpl = '{{#subject}} e388a4556c0f65e1904146cc1a846bee{{.}}94b3e26ee717c64999d7867364b1b4a3 {{/subject}}' ; 2 var html = Mustache.render(tpl, data); 3 // 输出： 4 e388a4556c0f65e1904146cc1a846beeCh94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeEn94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeMath94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beephysics94b3e26ee717c64999d7867364b1b4a3 {{>partials}} Start with > to represent submodules, such as {{> msg}}; when the structure is complex, we can use this syntax to split the complex structure into several small submodules, such as:

1 var tpl = "4a249f0d628e2318394fd9b75b4636b1{{namme}}473f0a7621bec819994bb5020d29372a ff6d136ddc5fdfeffaf53ff6ee95f185{{>msg}}929d1f5ca49e04fdcb27f9465b944689" 2 var partials = {msg: " {{#msg}}25edfb22a4f469ecb59f1190150159c6{{sex}}bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6{{age}}bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6{{hobit}}bed06894275b65c1ab86501b08a632eb{{/msg} 3 var html = Mustache.render(tpl, data, partials); 4 //输出： 5 4a249f0d628e2318394fd9b75b4636b1xiaohua473f0a7621bec819994bb5020d29372a 6 ff6d136ddc5fdfeffaf53ff6ee95f185 7 25edfb22a4f469ecb59f1190150159c6femalebed06894275b65c1ab86501b08a632eb 8 25edfb22a4f469ecb59f1190150159c622bed06894275b65c1ab86501b08a632eb 9 25edfb22a4f469ecb59f1190150159c6readingbed06894275b65c1ab86501b08a632eb 10 929d1f5ca49e04fdcb27f9465b944689 {{{data}}} {{data}} The output will translate special characters such as this. If you want to keep the content as it is, you can use {{{}}} , for example:

1 var tpl = '{{#msg}} e388a4556c0f65e1904146cc1a846bee{{{age}}}94b3e26ee717c64999d7867364b1b4a3 {{/msg}}' 2 // 输出： 3 e388a4556c0f65e1904146cc1a846bee2294b3e26ee717c64999d7867364b1b4a3 {{!comments}} ! represents a comment, and no content will be rendered and output after the comment.

1 {{! 这里是注释}} 2 // 输出：

At work, if the content on the page obtains data from the background and renders it on the page, we can use the mustache template. It is worth noting that the rendered data must match the key name.

mustache syntax

Related articles