当前位置: 首页 > 工具软件 > Juicer > 使用案例 >

juicerjs模板的使用

安承教
2023-12-01

参考:juicerjs引用模板的使用方式

<script type="text/template" id="infoWindow_tpl" style="display:none">
<div>
		<div class="hotel_info_box">
			<div class="hotel_img">
				<img src="{{hotelImg}}" />
			</div>
			<div class="hotel_tit">
				<div class="title_txt">
					<span class="icon"></span>
					<a href="{{hotleViewSrc}}" target="_blank">
						<strong>{{hotelName}}</strong>
					</a>
					<a class="{{hotelStarImg}}" title="{{hotelStarImgTitle}}"></a>
				</div>
				<div class="daodao_box">
					{@if scoreIsNull == 'true'}					
                		<p><span class="d_not_score">暂无评分</span></p>
					{@/if}
					{@if scoreIsNull == 'false'}					
                	 	<p><span class="d_score">{{hotelScore}}</span>/5.0分</p>
					{@/if}
				</div> 
				<div class="hotelAddress">{{hotelAddress}}</div>
				
				<div class="hotelAddress">{{distanceHead}}<strong class="orange">{{distancePointName}}</strong>{{distancePointNameInfo}}<strong class="orange">{{distance}}</strong>{{distancePointEnd}}</div>
									    
			</div>
		</div>
		<div class="hotel_room_box">
			<table width="100%">
				<thead>
					<tr>
						<th>房型</th>
						<th width="35%"></th>
						<th  >房价</th>
					</tr>
				</thead>
				<tbody>
					{@each hotelRoom as hl}
					<tr height="10px">
						<td class="hotel_type">{{hl.roomType}}</td>
						<td>
							<b class="yufu" style="display:{{hl.roomYufuFlag}}">垫付</b>
							<b class="daofu" style="display:{{hl.roomDaofuFlag}}">到店付</b>
						</td>
						<td >
							<span class="price">¥{{hl.roomPrice}}
							</span>起
						</td>
					</tr>
					{@/each}
				</tbody>
			</table>
			<div class="btn_section">
			<t:form t:id="viewForm" clientValidation="true">
			 <a href="{{hotleViewSrc}}" target="_blank" class="long_blue_btn">
					查看全部房型
					<span class="right_arrow">◆</span>
			</a>
			
			</t:form>
			</div>
		</div>
	</div>
	</script>

js

// 创建信息窗
	function createInfoWindow(content,width,height){
		width=width || 410;
		height=height || 250;
		var timeStamp = (new Date()).valueOf();
		
		var infoWindow=new BMap.InfoWindow('',{width:width,height:height,enableMessage:false});
		// 打开窗口时加载内容
		infoWindow.addEventListener('open',function(){
			var self=this;
			var timeStamp = (new Date()).valueOf();
			new Ajax.Request(getContext()+"/domhotel/book/HotelNewMapSearch.getHotelInfo/"+content.lng +"/"+content.lat +"/"+ timeStamp,{
				method:'post',
				parameters:content,
				onLoading:function(){
					self.setContent('<div class="loading_box"></div>');
				},
				onSuccess:function(transport){
					try{
//						// 信息窗口内容由模板渲染而来,因此不能忘记在页面里面的模板函数
						var tpl=$('infoWindow_tpl').innerHTML,
						data=transport.responseText.evalJSON(true).hotelHTML;
					    var html=juicer(tpl,data);
					    setTimeout(function(){
						self.setContent(html);
					 },0)
					}catch(error){console.log(error)}
				}
			})
		})
		return infoWindow;
	}
 类似资料: