当前位置: 首页 > 工具软件 > Mustache > 使用案例 >

mustache:Web模板引擎

柳涵映
2023-12-01

mustache.js  Web模板引擎

示例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Js/mustache.js" type="text/javascript"></script>
    <script type="text/javascript">
        //通过以哈希值或者对象的方式扩展模板标签
        var view = {
            title: "Joe",
            calc: function () {
                return 2 + 4;
            }
        };

        //Mustache.render 函数有2个参数: (1) mustache 模板和 (2)包含了需要渲染给模板的数据和代码的一个视图对象。
        var output = Mustache.render("{{title}} spends {{calc}}", view);
        document.write(output);
    </script>
</head>
<body>

</body>
</html>

 

效果:

Joe spends 6

 


看了Mustache的github,学学此中的语法,做个笔记

1.简单的变量调换:{{name}}

var data = { "name": "Willy" };
Mustache.render("{{name}} is awesome.",data);

返回成果 Willy is awesome.

 

2.若是变量含有html的代码的,例如:<br>、<tr>等等而不想转义可以在用{{&name}}

var data = {
             "name" : "<br>Willy<br>"
         };
         var output = Mustache.render("{{&name}} is awesome.", data);
         console.log(output); 


成果:<br>Willy<br> is awesome.成果:<br>Willy<br> is awesome.

去掉"&"的成果是转义为:&lt;br&gt;Willy&lt;br&gt; is awesome.(默认将"<"和">"转义)

 

3.若是是对象,还能申明其属性

var data = {
             "name" : {
                 "first" : "Chen",
                 "last" : "Jackson"
             },
             "age" : 18
         };
         var output = Mustache.render(
                 "name:{{name.first}} {{name.last}},age:{{age}}", data);
         console.log(output); 


成果:name:Chen Jackson,age:18成果:name:Chen Jackson,age:18

 

 

4.{{#param}}这个标签很强大,有if断定、forEach的功能。

 var data = {
                 "nothin":true
             };
             var output = Mustache.render(
                     "Shown.{{#nothin}}Never shown!{{/nothin}}", data);
             console.log(output); 


若是nothin是空或者null,或者是false都邑输出Shown.相反则是Shown.Never shown!。若是nothin是空或者null,或者是false都邑输出Shown.相反则是Shown.Never shown!。

 

5.迭代

var data = {
            "stooges" : [ {
                "name" : "Moe"
            }, {
                "name" : "Larry"
            }, {
                "name" : "Curly"
            } ]
        };
        var output = Mustache.render("{{#stooges}}<b>{{name}}</b>{{/stooges}}",
                data);
        console.log(output); 


输出:<b>Moe</b>
      <b>Larry</b>
      <b>Curly</b>

 

6.若是迭代的是数组,还可以用{{.}}来调换每个元素

var data = {
            "musketeers" : [ "Athos", "Aramis", "Porthos", "D""Artagnan" ]
        };
        var output = Mustache.render("{{#musketeers}}* {{&.}}{{/musketeers}}",
                data);
        console.log(output); 


输出:* Athos
      * Aramis
      * Porthos
      * D""Artagnan

 

7.迭代输出的还可所以一个function返回的成果,function可以读取当前变量的高低文来获取其他属性履行其他操纵

 var data = {
             "beatles" : [ {
                 "firstName" : "John",
                 "lastName" : "Lennon"
             }, {
                 "firstName" : "Paul",
                 "lastName" : "McCartney"
             }, {
                 "firstName" : "George",
                 "lastName" : "Harrison"
             }, {
                 "firstName" : "Ringo",
                 "lastName" : "Starr"
             } ],
             "name" : function() {
                 return this.firstName + " " + this.lastName;
             }
         };
         var output = Mustache
                 .render("{{#beatles}} *{{name}}{{/beatles}}", data);
         console.log(output); 


输出: *John Lennon
       *Paul McCartney
       *George Harrison
       *Ringo Starr

 

8:办法里面可以再履行变量中的表达式

var data = {
             "name" : "{{age}}" + "Tater",
             "bold" : function() {
                 return function(text, render) {
                     console.log(text);
                     return "<b>" + render(text) + "</b>";
                 };
             },
             "age" : 18
         };
         var output = Mustache.render("{{#bold}}Hi {{name}}.{{/bold}}", data);
         console.log(output); 

输出成果:
 

Hi {{age}}Tater.

 

 

 

 

 

 


 

 类似资料: