mustache.js的使用说明

Posted 2022-06-22 michael_yqs

Mustache 是个不错的js模板引擎，源码：https://github.com/janl/mustache.js

mustache的一些说明：http://mustache.github.com/mustache.5.html

下面是自己总结的一些小说明

1、简单的变量替换name

     eg：var data="name":"Jhon";
            var output= Mustache.render("name is awsome",data);
            console.log(output);//Jhon is awsome.
2、若是变量中含有html代码，而又不想转义的，在变量前面加上&即可。&name
3、变量是对象时，还可以声明其属性：
    eg：var data = "name":
                              "first":"Willy",
                              "last":"John"
                         ,
               "age":"18";

            var output=Mustache.render("name.first name.last is age  years old.",data);
            console.log(output);//Willy Jhon is 18 years old.
4、#param标签的功能很强大，有if判断、foreach的功能
     eg1：//判断
   

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

eg2:迭代

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

     
      若迭代的是数组，还可以通过.来调换每个元素
      eg3：//数组迭代
     

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

5、迭代输出还可以是一个function返回的结果：

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

6、^与＃相反，若变量是null、undefined、 false、和空数组则执行相应操作，相当于提供了一个错误处理机制

#repo
  <b>name</b>
/repo
^repo
  No repos :(
/repo

7、 !  注释
8、包含

base.mustache:
<h2>Names</h2>
#names

 

 > user
/names
user.mustache:
<strong>name</strong>    

上述代码等价于：

<h2>Names</h2>
#names
  <strong>name</strong>
/names