Mustache简明使用教程

wsy92 8年前

来自: http://lolicookie.herokuapp.com/mustachejian-ming-shi-yong-jiao-cheng/

Mustache 是一款简单的由js编写的模板框架,如果你以前用过smarty或者简单知道它的使用方法就会很好理解它的使用方式。理论上可以将它使用在前端中或者node中,是一款很易于理解和使用的前端框架

下载源码

Mustache 的代码可以在github中找到并下载( 在这里 ),,,好吧我并没有研究明白怎么用npm自己compose,我选择了直接下载目录下的 mustache.min.js ,或者你也可以使用由 bootcdn提供的CDN镜像 来引用这个库,这里选了一个2.21的

<script src="//cdn.bootcss.com/mustache.js/2.2.1/mustache.min.js"></script>  

其实大家也注意到一些诸如jquery之类的库,都会有两个文件给出来,一个是 jquery.js ,另一个是 jquery.min.js ,我看了一下这两个文件的区别,其实带 .min.js 的是经过压缩混淆的版本,体积也会比不带 min 的小一些,但是代码由于经过压缩混淆完全没有可读性,所以大家可以自己舍取

使用方法

下面这个例子演示了如何通过Mustache和jquery向页面中输出数据

<html>        <head>          <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>          <script src="mustache.min.js"></script>      </head>      <body>          <div id="main">              <script>                  //页面加载完执行 这部分详见jq手册                  $(function(){                      //待填充的数据                      var data = {                          'user_name' : 'techmoe'                      };                        //使用Mustache.render方法填充模板并追加进div#main                      $('#main').append(Mustache.render('<div style="font-size:20px">Hello, {{user_name}}</div>', data));                  });              </script>          </div>      </body>  </html>  

输出 但是这么写有时看起来似乎不太规整,因为我们并不能把大量的html代码塞进js文件,所以我们可以用一种流行的方法把模板数据放到html中

<html>        <head>          <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>          <script src="mustache.min.js"></script>      </head>      <body>          <div id="main">                <!-- 在html内创建模板 -->              <script type="text/x-mustance" id="template-1">                  <div style="font-size:20px">                      Hello, {{user_name}}                  </div>              </script>                  <script>                  //页面加载完执行 这部分详见jq手册                  $(function(){                      //待填充的数据                      var data = {                          'user_name' : 'techmoe'                      };                        //使用Mustache.render方法填充模板并追加进div#main                      //这里通过jquery的html方法取得了模板的数据                      $('#main').append(Mustache.render($('#template-1').html(), data));                  });              </script>            </div>      </body>  </html>