百度js模板的使用
官方地址：http://baidufe.github.io/BaiduTemplate/
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="baidu template" />
<meta name="description" content="javascript前端模板" />
<title>test</title>
<script type="text/javascript" src="./baiduTemplate.js"></script>
</head>
<body>
<script type="text/template" id="loanQueryTemp">
<div class="info_usual">
<table class="tab_info table_list table-fixed">
<tbody>
<tr>
<td width="17%">贷款品种</td>
<!--在里边可以使用自定义函数-->
<td width="16%"><!=xingye.finaceType(FINANCING_TYPE)!></td>
<td width="16%">借款人编号</td>
<td width="16%"><!=MORTGAGORNO!></td>
<td width="16%">借款人名称</td>
<td><!=MORTGAGOR_NAME!></td>
</tr>
<tr>
<td>备注</td>
<td colspan="5"><!=REMARK!></td>
</tr>
</tbody>
</table>
<div class="title clearfix">
<h4>贷款明细</h4>
</div>
<table class="tab_info table_list table-fixed">
<tbody>
<!--模板取数组对象的方式-->
<!for(var i=0;i<loans.length;i++){!>
<tr>
<td width="10%">贷款账号</td>
<td width="15%"><!=loans[i].LOAN_ACCT_NO!></td>
<td width="10%">申贷金额</td>
<td width="15%"><!=loans[i].APP_AMOUNT!></td>
<td width="10%">放款日期</td>
<td width="15%"><!=loans[i].LOAN_DATE!></td>
<td width="10%">放款到期日</td>
<td width="15%"><!=loans[i].LOAN_EXPIRE!></td>
<td width="10%">剩余本金</td>
<td width="15%"><!=loans[i].REST_CAPITAL!></td>
<td width="10%">利息</td>
<td width="15%"><!=loans[i].INTEREST!></td>
</tr>
<!}!>
</tbody>
</table>
</div>
</script>
<div id="contaner">
</div>
<script type="text/javascript">
(function(window){
var xingye = (window.xingye = window.xingye || {});
xingye.finaceType=function(v){
var str =v ;
if(v==1){
str="E 秒贷";
}else if(v==2){
str="E 票贷";
}else if(v==3){
str="E 购贷";
}else if(v==4){
str="E 订贷";
}
return str;
}
})(window);
//设置左分隔符为 <!
baidu.template.LEFT_DELIMITER='<!';
//设置右分隔符为 !>
baidu.template.RIGHT_DELIMITER='!>';
//此例子中还包含数组对象
var data ={"bean":{"CREATE_ID":null,"CREATE_TIME":null,"FINANCING_TYPE":1,"ID":null,"MODIFY_ID":null,"MODIFY_TIME":null,"MORTGAGORNO":"75","MORTGAGOR_NAME":"HQM","REMARK":"备注","STATUS":null,"TYPE":null,"class":"com.voiinnov.drbl.order.bean.LoanQueryBean","loans":[{"APP_AMOUNT":43232344,"INTEREST":2323,"LOAN_ACCT_NO":"贷款账号","LOAN_DATE":1431253545000,"LOAN_EXPIRE":1432656000000,"REST_CAPITAL":1222222,"class":"com.voiinnov.drbl.order.bean.LoanQueryLoanBean"},{"APP_AMOUNT":32323,"INTEREST":5674,"LOAN_ACCT_NO":"贷款账号2","LOAN_DATE":1431253545000,"LOAN_EXPIRE":1432656000000,"REST_CAPITAL":2313333,"class":"com.voiinnov.drbl.order.bean.LoanQueryLoanBean"}]},"msg":"0"}
delete data.bean.class;
//var tt = document.getElementById("loanQueryTemp").innerHTML;
var template =baidu.template('loanQueryTemp',data.bean);
document.getElementById("contaner").innerHTML=template;
</script>
</body>
</html>
相关推荐
百度JS模板引擎，简称baiduTemplate，是一个由百度公司开发的JavaScript模板引擎，主要用于前端开发中数据与HTML的绑定，实现动态内容的渲染。在1.0.6版中，百度Template进行了重构，修复了定义变量的bug，并且增加...
【标题】"百度模板--baiduTemplate.js"指的是一个基于百度开发的JavaScript模板引擎的文件。这个文件可能是百度提供的一种用于快速构建动态HTML页面的工具，它允许开发者将数据和视图逻辑分离，使得前端代码更加清晰...
【标题】"dz模板仿百度贴吧手机模板.rar"是一个压缩包文件，其中包含了用于Discuz! 论坛系统的模板，该模板设计模仿了百度贴吧的移动版界面。Discuz! 是一个广泛使用的开源社区论坛软件，它允许用户创建和管理互动的...
整体来看，百度Echarts插件及模板的介绍为数据可视化领域提供了一种高效且功能强大的可视化工具，同时兼顾了使用的简易性与模板的多样性，极大地丰富了开发者在进行数据展示时的选择，使得复杂的数据分析结果可以...
这是百度地图的核心，它通过在HTML页面中引入特定的JS库，使开发者能够通过JavaScript来操作和定制地图。在"百度地图模板代码"中，模板通常包含了初始化地图、设置地图中心点、缩放级别、添加图层、标记、信息窗口等...
【百度MALL官网ECShop模板】是专门为电商网站设计的一款高品质模板，由百度公司提供，旨在为中高端消费者打造一个专业且具有品质感的在线购物平台。ECShop是一款开源的电子商务系统，它提供了丰富的功能和高度的可...
百度地图3.0离线js api模板（demo）+ 地图瓦片下载器； 解压后使用 demo.html 来查看demo ； 地图资源文件存存放位置为 tiles 文件夹； 使用压缩包里面的 【全能电子地图下载器】 进行地图瓦片下载，下载完之后放到 ...
4. **开发流程**：使用这个模板时，开发者首先需要安装百度开发者工具，然后导入模板，根据自己的需求修改页面内容和逻辑，最后进行调试和发布。 5. **百度小程序的优势**：百度小程序能无缝接入百度搜索，有利于...
【标题解析】：“MyHICss 百度空间模板小偷（免安装）”这个标题表明这是一款专门针对百度空间模板的工具，名为"MyHICss"，并且它具有免安装的特点，意味着用户无需经过复杂的安装过程即可使用。关键词“小偷”在...
【百度百科互动百科模板】是一种基于网页设计的模板，主要用于创建类似于百度百科或互动百科的在线百科全书网站。这种模板的设计目标是提供一个简洁、专业且用户友好的界面，以便用户可以方便地浏览、编辑和贡献知识...
标题中的“Modoer旗舰版_模板 仿百度身边模板 For 3.0”指的是一个基于Modoer内容管理系统（CMS）的旗舰级模板，该模板设计灵感来源于百度的“百度身边”服务，专为3.0版本的Modoer系统定制。这个模板可能包含了优化...
"百度日历JS版本"是一个基于JavaScript实现的日历控件，它旨在为用户提供与百度官方日历相似的视觉体验和功能。在这个项目中，我们可以看到四个主要组成部分：`css`、`image`、`index.html`和`js`，这些文件共同构建...
但同时百度MIP也有些缺点，不可以放置自行编写的JS，导致我们这个模板有些功能缺失，阅读页不可调节字体大小和设置背景，我们把阅读页默认调大了字体和设置成护眼的颜色。 默认颜色有蓝色、浅绿色、深绿色、橙色和...
在实际应用中，"仿百度身边模板 For Modoer v2.5 GBK.zip"的使用者需要具备一定的HTML、CSS和JavaScript知识，以便理解和修改前端代码。同时，熟悉Modoer CMS的后台管理也是必要的，因为模板的安装和配置通常涉及到...
通过使用这个模板，开发者或网站管理员可以快速构建一个具备类似百度身边功能的网站，展示和管理本地商家信息、优惠活动、用户评价等内容，为用户提供便捷的在线查询和交互体验。 【知识点详解】 1. **Web模板系统...
4. **性能优化**：由于模板包含了大量的CSS和JavaScript，可能会影响加载速度。管理员应关注模板的代码优化，如合并CSS和JS文件，减少HTTP请求，以提高页面加载效率。 5. **SEO优化**：一个好的门户模板应考虑搜索...
使用这样的模板，开发者可以轻松地获取和展示百度搜索风云榜的实时数据，对于媒体、市场研究者或是个人爱好者来说，都是快速获取网络热点信息的有效途径。同时，对于学习Web开发的人来说，分析和理解这个模板也能...
在这个模板中，可能使用了如Leaflet或OpenLayers这样的开源GIS库，它们可以集成不同地图服务（如Google Maps、高德地图或百度地图），并在地图上叠加自定义图层，显示物联网设备的位置、状态等信息。开发者可以利用...