zoukankan      html  css  js  c++  java
  • 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}}
    与尘埃中开出花朵。
  • 相关阅读:
    validFrom不通过submit按钮来触发表单验证
    微信小程序组件开发
    css3 单行文字溢出,多行文字溢出
    表格布局
    对象设置默认属性
    按钮样式
    判断一个json是否为空
    vue高仿饿了么(三)
    Win10 用IE打开网址默认跳转到Edge如何解决?
    VMware虚拟机安装Win11正式版
  • 原文地址:https://www.cnblogs.com/congfeicong/p/8892765.html
Copyright © 2011-2022 走看看