template模板插件基本用法

资源下载https://github.com/fengyuanchen/cropperjs （官方文档）

1.首先需引入js文件

<script src="jquery.min.js"></script>
<script src="jquery.temp.js" type="text/javascript" charset="utf-8"></script>

2.在html文件中写模板 

可以在模板中使用循环及if语句进行流程控制

循环语句应使用each关键字 ：{{each (i,data) list}} ...code... {{/each}}

if判断语句应使用if关键字 ：{{if (data.id == 1)}} ...code... {{/if}}

<div class="cont"></div>
<script type="text/html" id="model">
    <h1>${title}</h1>
    <ul class="slide-ul">		        
         {{each(i,data) list}}
             <li class="slide-li">
                 <a href="${data.href}" target="_blank">
                     <img class="sbq_img" src="${data.imgsrc}"/>
                     <p class="sbq_desc">${data.name}</p>
                    {{if (data.id == 1)}}
                    <div class="page3-select" data-tag="C"><p class="page3-icon posi LT"></p>111</div>
                    {{/if}}
                 </a>
             </li>            
         {{/each}}                      
    </ul>                          
</script>

3.在js文件中渲染模板

var html = $('#model').tmpl({
 	list:[
	    {
	        href:'index.html',
	        imgsrc:'img/img.jpg',
	        name:'名字',
	        id:'1'
	    },
	    {
	        href:'index.html',
	        imgsrc:'img/img.jpg',
	        name:'名字',
	        id:'2'
        },
    ],
    title:'可以传数组也可以传字符串或数字'
})
$('.cont').empty().append(html)