JavaScript type="text/template"的用法

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

 <div class="container"> 2 <div class="waterfall"> 3 </div> 4 </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()