JS模板引擎-laytpl模板引擎使用实例1

最新推荐文章于 2021-10-12 15:25:30 发布

cl11992

最新推荐文章于 2021-10-12 15:25:30 发布

阅读量2.9k

点赞数 1

分类专栏：模板引擎文章标签：模板引擎实例

本文链接：https://blog.csdn.net/cl11992/article/details/77046757

版权

模板引擎专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用效果图

使用laytpl模板引擎进行动态渲染

使用实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>laytpl测试</title>
<script type="text/javascript">
	$(function(){
		//渲染模板
		function render(tpl,data){
			var retuHtml="";
			laytpl(tpl).render(data, function(html){
				retuHtml=html;
			});
			return retuHtml;
		}

		$("#btn").click(function(){
			$.ajax({
			url:ctxs+"/product/productSpu/selectBrand2.htm",
			type:'POST',
			data:data,
			dataType:'json',
			success:function(data){
				if(data!=null){
					$("#brandUl").html("");
					for(var i=0;i<data.length;i++){
						var brandTpl = $("#brandTpl").html();//模板
						var dataJson={"brand":data[i]};
						var brandLi=render(brandTpl,dataJson);
						$("#brandUl li").append(brandLi);
					}
				}
			}
		});
		});
	});
</script>
</head>
<body>
	<button type="button" id="btn">点击</button>
	<ul id="brandUl">
		<li>laytpl测试拼接</li>
	</ul>	
    	<script type="text/template" id="brandTpl">
		<li>
			<a href="javascript:void(0);" name="selectBrand" brandId="{{d.brand.id}}" brandName="{{d.brand.name}}">
			<b>选择</b><span>{{d.brand.firstLetter}}-{{d.brand.name}}</span></a>
		</li>
	</script>
</body>
</html>