BaiduTemplate模板 js技术可以生成一套html代码块,根据不同的数据进行动态展示。
特点:
默认的Html转义,变量未定义时输出为空,防止页面错乱,可自定分隔符等,学习成本低, 简单易用。
目前版本:1.0.6,
使用时需引入 baidutemplate.js文件
定义html代码块格式如下:
<script id="navTemplate" type="text/template">
<div>
<% if( list.length >1 ){%>
<ul>
<% for(var i=0; i< list.length; i++){%>
<li> <%=list[i] %> </li>
<%}%>
</ul>
<%}%>
</div>
</script>
<script type="text/javascript">
//list的数据如下所示:json串
var data = {
"title": "张三",
“list”: [
'test1',
'test2',
'test3'
]
};
//使用baidu.template命名空间绑定模板
var bt = baidu.template;
var html = bt('navTemplate', data);
//将模板内容放置到指定位置
$(#id).html(html);
</script>