Mustache的简单使用

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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值