layui 模板使用

1，建立试图

<div id="normal-exchange"  >
    <div id="exchange-infor" ></div>
</div>

2、建立模板

<script id="demo" type="text/html">
	{{# if(d.exrate==5) { }}					
		5
	{{# }else if(d.exrate==1) { }}
		1
	{{# } }}
				
</script>

3、创建json文件，模拟数据接口

{
	"code": 0,
	"msg": "",
	"data": [{
		"url": "../../img/ad2.jpg",
		"roomname": "七天酒店",
		"exrate": "3",
		"goodscount": 5
	}]
}

4、数据渲染

<script>
			layui.use(['laytpl','jquery'],function(){
				var laytpl = layui.laytpl,
				$ = layui.$;
				
				//渲染模板
				$(function(){
					$.ajax({
						url: './index.json',
						type: 'get',
				        dataType: 'json',
				        success: function (res) {

				        	//请求成功
				        	if(res.code==0){
				        		var htmlList = '';
								var data = res.data;
								
								var getTpl = demo.innerHTML;
								
								//将返回的数据以模板的形式显示出来
								$.each(data, function(index,elem) {//i为索引,el为当前对象

									htmlList += laytpl(getTpl).render(elem);
								});
			
								$('#exchange-infor').empty().append(htmlList);
				        	}
				        }
					});
				});
			});
		</script>