mustache 的使用

最新推荐文章于 2024-08-09 07:55:05 发布

原创最新推荐文章于 2024-08-09 07:55:05 发布 · 5.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

4 篇文章

订阅专栏

前些日子做个H5嵌入手机的应用，用到了mustache.js,于是就做个如下的简单介绍，如有错误请指出，万分感谢。最后会把项目中的如何用怎么用会贴出部分代码。

mustache.js 它是一个javascript的模板引擎库，就像java模板引擎velocity一样，只是提供展示信息的模板，其语法简单明了，容易上手。

一个简单的demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/mustache.js" ></script>
    </head>
    <body>
        <div id="box">
            <script id='template'>
              {{name}}
            </script>
        </div>
    </body>

    <script>
        var data = {
              "name":"wb",
              "age" :27,
              "birth":"10-06",
              "school":"阜阳师范",
              "major":["数学","计算机"],
              "has_car":false,
              "car":null,
              "has_house":true,
              "msg":{
                "hate":"dog",
                "love":"beautiful girl"
              }
        }
         $("#box").append(Mustache.render($('#template').html(),data));
    </script>
</html>

1. {{name}}

{{ }}就是 mustache 输出值得简单格式，花括号中为json的key值。直接运行上述html，会看到结果为：wb

2. {{#major}} {{/major}}

以#开始、以/结束表示区块，可以一次或多次渲染内容有if、foreach功能。修改如下：
       <script id='template'>
              {{#major}}
                 {{.}}
              {{/major}}
            </script>
 输出：数学 计算机
注意：如果{{#major}} {{/major}}中的 major值为 null, undefined, false；则不渲染输出任何内容。

3. {{^car}} {{/car}}

和第2个语法差不多，只不过当值为 null, undefined, false 时才渲染输出该区块内容。
      <script id='template'>
        {{^car}}
         "当值为 null, undefined, false 时才渲染输出该区块内容";
        {{/car}}
      </script>
输出：当值为 null, undefined, false 时才渲染输出该区块内容

4. {{.}}

表示集合中的枚举，如实例2

5. {{>parent}}

以>符号表示子模块，可以将复杂的结构拆分为多个子模块。如下：
       <script id='template'>
              <ul>
                 {{>msg}}
              </ul>
       </script>

var son = {"msg":"{{#msg}} <li>{{hate}}</li> <li>{{love}}</li> {{/msg}}"}
         $("#box").append(Mustache.render($('#template').html(),data,son));

   输出：
       dog
       beautiful girl

6. {{!comments}}

以!开头，为注释说明内容，不渲染该内容，如下：
<script id='template'>
            {{!这里是注释}}
            {{name}}
            </script>
输出：wb

下面是在项目中的应用：
1. 通过ajax，返回数据data，成功后遍历data。js文件：

 var feedbackList = [];
   //遍历列表
 for(var i=0;i<data.list.length;i++){
     var id = data.list[i].id;
     var createTimeStr = data.list[i].createTimeStr;
     var questionDesc = data.list[i].questionDesc;
     var billTypeName = data.list[i].billTypeName;
     var billCode =  data.list[i].billCode;
 // 放入预先准备好的集合中                           feedbackList.push({"id":id,"createTimeStr":createTimeStr,"questionDesc":questionDesc,"billTypeName":billTypeName,"billCode":billCode});
                    }
  var renderData = {"feedbackList":feedbackList};
  $(".recordBox").append(Mustache.render($('#template').html(), renderData));

渲染html上的模板：

<div class="recordBox">
    <script type='text/x-mustance' id='template'>
            {{#feedbackList}}
         <div class='tab'>
              <div class='e-row recordItem'>
              <a href='/feedback/queryDetail?id={{id}}'>
                <h4><b>{{createTimeStr}}</b><span>NO.{{id}}</span></h4>
                <p>{{questionDesc}}</p>
                <div>{{#billTypeName}} {{billTypeName}}:{{billCode}}{{/billTypeName}}</div>
               </a>
              </div>
           </div>
             {{/feedbackList}}
            </script>
       </div>