//直接复制即可使用,记得要下载baiduTemplate.js
/**
* 个人使用习惯
* 官网的使用是模板替换的方式,但是在使用过程中
* 我更偏向于哪块代码需要替换,直接拿标签包住的方法
* <script id="父级类名" type="text/html">要替换的内容</script>
* 这样避免了重复起名称的尴尬,下面是官网的使用方法
**/
<!-- 引入baiduTemplate -->
<script type="text/javascript" src="./baiduTemplate.js"></script>
<div id='result'></div>
<!-- 模板1开始,可以使用script(type设置为text/html)来存放模板片段,并且用id标示 -->
<script id="t:_1234-abcd-1" type="text/html">
<div>
<!-- 我是注释,语法均为Javascript原生语法,默认分割符为 <% %> ,也可以自定义,参见API部分 -->
<!-- 输出变量语句,输出title -->
<h1>title:<%=title%></h1>
<!-- 判断语句if else-->
<%if(list.length>1) { %>
<h2>输出list,共有<%=list.length%>个元素</h2>
<ul>
<!-- 循环语句 for-->
<%for(var i=0;i<5;i++){%>
<li><%=list[i]%></li>
<%}%>
</ul>
<%}else{%>
<h2>没有list数据</h2>
<%}%>
</div>
</script>
<!-- 模板1结束 -->
<!-- 使用模板 -->
<script type="text/javascript">
var data={
"title":'欢迎使用baiduTemplate',
"list":[
'test1:默认支持HTML转义,如输出<script>,也可以关掉,语法<:=value> 详见API',
'test2:',
'test3:',
'test4:list[5]未定义,模板系统会输出空'
]
};
//使用baidu.template命名空间
var bt=baidu.template;
//可以设置分隔符
//bt.LEFT_DELIMITER='<!';
//bt.RIGHT_DELIMITER='!>';
//相似与PHP中foreach的用法的for的另一种使用方式
<%for(var v of data){%>
<%}%>
//可以设置输出变量是否自动HTML转义
//bt.ESCAPE = false;
//最简使用方法
var html=bt('t:_1234-abcd-1',data);
/**
* JavaScript渲染
**/
document.getElementById('result').innerHTML=html;
/**
* jQuery渲染
**/
$("#result").html(html);
</script>
BaiduTemplate模板引擎
最新推荐文章于 2021-06-04 04:21:44 发布