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