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