| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
wsy92
9年前发布

Mustache简明使用教程

来自: 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>  

 本文由用户 wsy92 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1456101700151.html
模板引擎 Mustache.js