静坐常思己过,闲谈莫论人非,能受苦乃为志士,肯吃亏不是痴人,敬君子方显有德,怕小人不算无能,退一步天高地阔,让三分心平气和,欲进步需思退步,若着手先虑放手,如得意不宜重往,凡做事应有余步。持黄金为珍贵,知安乐方值千金,事临头三思为妙,怒上心忍让最高。切勿贪意外之财,知足者人心常乐。若能以此去处事,一生安乐任逍遥。

Mustache.js语法

作者:大鹏 发布于:2013-7-6 1:11 Saturday 分类:JavaScript与HTML

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.(默认将"<"和">"转义)

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


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!。


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.

<b>Hi 18Tater.</b>

9.{{^}}与{{#}}相反,若是变量是null、undefined、 false、和空数组讲输出成果


10.{{!  }}注释




标签: javascript

et_highlighter
发表评论 »本文目前尚无任何评论

发表评论

干净网络从你做起,切勿黏贴小广告