Mustache的简单使用

来源：互联网发布：focusky mac产生 app 编辑：程序博客网时间：2024/05/18 03:35

2016/03/19

昨天第一次实用了Mustache这框架的第一次使用。我相信很多情况下是使用了这个框架的迭代循环。

1、先定义模板：（而模板中{{}}中的数据主要就是后台要给前台返回的json格式的数据）

<script id="tpl" type="text/html">{{#content}}<div class="col-md-3 col-sm-6 isotope-item web-design">             <div class="image-box">             <div class="overlay-container">             <img src="/assets/images/portfolio-1.jpg" alt="">             <a href="/vods/1" class="overlay small">              <i class="fa fa-play"></i>                    <span>{{fileName}}</span>              </a>              </div>              <div class="image-box-body">              <h5 class="title"><a href="/vods/1">{{fileName}}</a></h5>               <p style="float: left">116分钟</p><p style="float: right">播放量：20</p>              </div>              </div>              </div><span style="white-space:pre"></span>{{/content}}</script>

2、

 var showVods = function(rows) {  /<span style="color:#ff0000;">/rows 是出入的json数据</span>            var view = rows;            var tpl1 = $('#tpl').html(); <span style="color:#ff0000;"> //函数用于设置和返回当前jquery对象所匹配的DOM元素内的html内容。</span>            Mustache.parse(tpl1);       <span style="color:#ff0000;"> //进行扫描格式化，具体需要参看源码</span>            var show = Mustache.render(tpl1, view); <span style="color:#ff0000;">//</span>            $('div.image-boxes').html(show);        }

参考网址：http://www.tuicool.com/articles/JneIvuf

1 0