百度template模板技术学习(一)
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>
- 步步为营 .NET 设计模式学习笔记 十八、Template(模板模式)
- 腾讯js模板引擎 artTemplate 学习
- C++ Template学习笔记之函数模板(7)——重载函数模板
- ThinkPHP学习笔记(二):ThinkPHP框架的模板技术
- OpenCV学习二十六:matchTemplate,模板匹配
- ClassTemplateLoader模板使用学习
- Asp.net core 学习笔记 ( Smtp and Razor template 电子邮件和 Razor 模板 )
- 模板Trait 技术与简述template 元编程
- Spring学习-23:Spring中的JDBC Template(JDBC模板)快速入门
- WPF学习笔记(1):样式(Style)与模板(Template)
- StringTemplate.net模板技术用法
- opencv学习(三十八)之图像模板匹配matchTemplate()
- 前端技术学习网站(百度、腾讯、淘宝)
- 【学习】tmodJS——前端模板预编译技术
- Direct3D学习手记八:模板技术【镜面效果】
- StringTemplate.net模板技术用法
- spring框架学习(六)AOP事务及spring管理事务方式之Template模板
- 强大的DataGrid组件[9]_自定义头模板(HeaderTemplate)——Silverlight学习笔记[17]
- js模板引擎artTemplate学习总结
- phplib-template模板技术(转寄)