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}}">