使用效果图
使用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>
