template.js的用法
1、template.js模板引擎
2、使用
a、不循环
模板:
<script id="card_pay_tpl" type="text/html"> <div class="cell-item"> <div class="cell-left">订单编号:</div> <div class="cell-right"> <input class="cell-input" type="text" value="{{data.card_sn}}" placeholder=""> </div> </div> <div class="cell-item"> <div class="cell-left">面额:</div> <div class="cell-right"> <input class="cell-input" type="text" value="{{data.denomination}}元" placeholder=""> </div> </div> <div class="cell-item"> <div class="cell-left">售价:</div> <div class="cell-right"> <input class="cell-input" type="text" value="{{data.price}}元" placeholder=""> </div> </div> </script>
调用
if (res.code == 200) { var _data = res; var html = template('card_pay_tpl', _data); $('元素').html(html); } else { alert("出问题啦"); }
b、循环
模板:
<script id="comment_tpl" type="text/html">
{{each data as data}}
<li class="border_b">
<p class="commont_tip cl">
<span class="fl font-14">{{data.user_name}}</span>
<span class="fl star_grace star_{{data.star}}"></span>
<span class="fr c999 font-12">{{data.add_time}}</span>
</p>
<p class="commont_detail">{{data.content}}</p>
</li>
{{/each}}
</script>
调用:
if (res.code == 200) { var html = template('comment_tpl', res); $('.commont_list').html(html); } else { YDUI.dialog.toast('已退出!', 'none', 1000); }
c、筛选条件:
模板:
<span>{{data.booking_date | dateFormat:data.booking_date}}</span>
筛选条件:
/*时间戳*/ template.helper('dateFormat', function (timestamp) { var date = new Date(timestamp * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000 Y = date.getFullYear() + '-'; M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; D = date.getDate() + ' '; return Y + M + D; });
d、输出html内容
模板:
使用#
<span>{{#data.booking_date | dateFormat:data.booking_date}}</span>
e、直接在行内写判断
<tr class="text-center {{data.type?'':'hide'}}" id="row_{{data.id}}">
f、索引判断 index
<script id="activity_template" type="text/html"> {{each list as data index}} <div class="tab-content {{index==1?'hide':''}}"> <span class="act-time-data"> <strong class="current-year"></strong>年度</span> <span class="data-number act-people-data margin-l-15">{{data.people_number}} <i>人次</i></span> <ul class="addr-lists"> {{each data.addr_list as item}} <li> <span class="name">{{item.addr_name}}</span> <span class="data-number">{{item.addr_scence}}<i> 場</i> </span> </li> {{/each}} </ul> <p class="addr-data">服務社區 :{{data.community_number}}人</p> <p class="addr-data">服務學校 : {{data.school_number}}人</p> </div> {{/each}} </script>
g、if else
{{if data.bottom.user == undefined}} <div class="main_bot_wen" style="border: 1px solid ${data.bottom.tag.border_color};color: ${data.bottom.tag.text_color};"> ${data.bottom.tag.text} </div> {{else}} <div class="main_bot_tou"> ${data.bottom.user.name} <img src="${data.bottom.user.logo}" alt=""> </div> {{/if}}