Mustache简明使用教程
wsy92
9年前
来自： 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>