baiduTemplate——js模板引擎使用
来源:互联网 发布:js事件对象 编辑:程序博客网 时间:2024/06/05 22:43
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<!-- 引入baiduTemplate -->
<script type="text/javascript" src="./baiduTemplate.js"></script>
</head>
<body>
<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='!>';
//可以设置输出变量是否自动HTML转义
//bt.ESCAPE = false;
//最简使用方法
var html=bt('t:_1234-abcd-1',data);
//渲染
document.getElementById('result').innerHTML=html;
</script>
</body>
</html>
0 0
- baiduTemplate——js模板引擎使用
- 百度JS模板引擎 baiduTemplate
- 百度JS模板引擎 baiduTemplate
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
- 简单易用的baidutemplate模板的使用
- Node.js开发入门—使用jade模板引擎
- 使用js模板引擎心得
- template.js —一款基于JS的模板引擎
- Node.js开发入门(六)——使用jade模板引擎
- 【转】——Jade 模板引擎使用
- JS模板引擎jTemplates使用笔记详解
- JS模板引擎jTemplates使用笔记详解
- doT.js 模板引擎的使用
- doT.js 模板引擎的使用
- template.js前端模板引擎使用
- JS模板引擎---腾讯artTemplate的使用
- JavaScript模板引擎Template.js使用详解
- template.js前端模板引擎使用
- 记录文档_taskset指令设置程序运行CPU
- [从头学数学] 第116节 相交线与平行线
- ios tableview iOS: TableView如何刷新指定的cell 或section
- Java8のStream学习
- VMWare虚机连不了网
- baiduTemplate——js模板引擎使用
- 函数备忘录
- iOS--Bundle的新建与使用
- FineUI秘密花园(六) — 表单控件
- 你属于开源性格测试六大分类中的哪一类呢
- mysql远程连接
- chrome两个有用的扩展程序
- 自定义RatingBar,不同分辨率屏幕下图片拉伸或者显示不完整问题解决
- Picasso开源图片加载利器使用初探