JavaScript type="text/template"的用法

JavaScript type="text/template"相当于定义一个模板，如果没有使用html（）方法的话，是显示不出来的，我们直接看例子(我是在tp框架的里面写的)

<div class="container"> <div class="waterfall"> </div> </div>

定义一个模板：

 <!-- 一个模板  -->
 <script id="waterfall-template" type="text/template">
     <?php foreach ($list as $key => $value) { ?>
     <ul class="list-group">
         <li class="list-group-item">
             <a href="javascript:;"><img src="<?php echo $value['banner_image']; ?>" /></a>
         </li>
         <li class="list-group-item">
             <a href="{:U('Admin/Banner/banner_detail',array('banner'=>$value['banner_id']))}"><button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="fa fa-pencil"></span></button></a>
             <a href="#myModal" class="del_btn" role="button" data-toggle="modal" data-banner="<?php echo $value['banner_id']; ?>"><button type="button" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></button></a>
             <span style="float: right;"><?php echo $value['banner_type'] == 1?'首页':'';?></span>
         </li>
     </ul>
     <?php } ?>
 </script>

使用：

 <script>
     $('.waterfall').data('bootstrap-waterfall-template', $('#waterfall-template').html()).waterfall();
     var del_data = null;
     $(".waterfall").on('click','.del_btn',function(){
         del_data = $(this).attr('data-banner');
     });
     $('.btn-danger').click(function(){
         if (del_data) {
             window.location.href = '{:U("Admin/Banner/banner_del")}?banner_id=' + del_data;
         }
     });
 </script>

参考其他人的资料：http://www.cnblogs.com/olivianate/p/5364850.html

我这里的案例是写一个流水布局的。waterfall()