美文网首页
解决dot.js,初次模板渲染界面有效,再次渲染界面无效的问题

解决dot.js,初次模板渲染界面有效,再次渲染界面无效的问题

作者: CoderZb | 来源:发表于2020-01-06 17:53 被阅读0次

    初始将数据data_渲染到页面上没有问题,第二次将数据data_渲染到页面上没有生效,经过调试发现doT.template($("#inCome-service").html())这行代码出了问题

    var list = $("#get_skill_boss_id");
    var tempFn = doT.template($("#get_skill_boss_tpl").html());
    var resultHTML = tempFn(data_);
    list.html(resultHTML);
    

    错误写法:模板嵌套在了容器中,即:get_skill_boss_tpl嵌套在了get_skill_boss_id

    <div class="containter" id="get_skill_boss_id">
      <script type="text/x-dot-template" id="get_skill_boss_tpl">
          <div class="topBanner">
              <div class="topItem" title='{"user_login":"{{=it.user_login}}"}' onclick="call_user_login(this)">
                  <span class="circle">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua-jineng"></use>
                </svg>
              </span>
                  <span>电话联系</span>
              </div>
                  {{? it.type == 1 }}
                  <div class="topItem" title='{"id":"{{=it.id}}"}' id="pay_last_money_click">
                    <span class="circle" >
                      <span class="iconfont iconPosition icon-weikuan-jineng  " style="font-size:30px;color:#999999;"></span>
                    </span>
                    <span id="pay_last_money_text" style="color:#999999;">支付尾款</span>
                  </div>
                  {{?? it.type == 2}}
                    <div class="topItem" title='{"id":"{{=it.id}}"}' id="pay_last_money_click" >
                      <span class="circle" >
                        <span class="iconfont iconPosition icon-weikuan-jineng  " style="font-size:30px;color:#999999;"></span>
                      </span>
                      <span id="pay_last_money_text" style="color:#999999;">尾款已付</span>
                    </div>
                  {{?? it.type == 3}}
                    <div class="topItem" title='{"id":"{{=it.id}}"}' id="pay_last_money_click" onclick="pay_last_money_func(this)">
                      <span class="circle">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-weikuan-jineng"></use>
                        </svg>
                      </span>
                      <span id="pay_last_money_text">支付尾款</span>
                    </div>
                  {{?}}
    
    
    
          </div>
          <div class="topBox">
              <div class="topDeail">
                  <div><span>预约时长:</span>{{=it.num}} 小时</div>
                  <div><span>已付意向金:</span>{{=it.advance_fee}} 元</div>
                  <div>
                    <span>服务总额:</span>¥{{=it.total}} 元
                    <div style="display:inline-block;height: 100%;padding-top: 2px;margin-right:5px;"><span onclick="onDetail()" tapmode class="iconfont icon-wenhao"></span>
                    </div>
    
                  </div>
                  <div><span>预约地点:</span>{{=it.address}}</div>
              </div>
              <div class="bottomBox">
                  <div class="bottomLeftBox">
                      <img src="{{=ImgUrl+it.avatar}}" style="width:60px;height:60px;border-radius:50%;">
                      <span style="font-size:16px;color:#333333;">{{=it.user_nickname}}</span>
                      <div style="font-size:13px;color:#808080;">
                          <span>{{=it.sex==1?'男':'女'}}</span>
                          <div style="display:inline-block;width:1px;height:10px;background-color:gray;"></div>
                          <span>{{=it.birthday}}岁</span>
                      </div>
    
                  </div>
                  <div class="bottomRightBox">
                      <span style="font-size:16px;color:#333333;font-weight:bold;">{{=it.title}}</span>
                      <span style="font-size:13px;color:#808080;">{{=it.content}}</span>
                      {{? it.n_time}}
                      <div>
                          <span id="recordControl" class="voiceTime iconfont icon-yuyin" tapmode onclick="event.stopPropagation();playOrPause(this)"  voiceUrl="{{=ImgUrl+it.url }}">
                            &nbsp;{{=it.n_time}}&quot;</span>
                          <span class="twinkleSpan iconfont icon-yuyin"></span>
                      </div>
                      {{?}}
                  </div>
              </div>
    
    
              <div class="connectBtn" title='{"other_nickname":"{{=it.user_nickname}}","other_userid":"{{=it.to_user_id}}","other_head_url":"{{=ImgUrl+it.avatar}}"}' onclick="chatOnclick(this)">与需求者沟通</div>
          </div>
       </script>
    </div>
    

    正确写法:模板和容器独立开来,即:get_skill_boss_tplget_skill_boss_id互相独立

    <div class="containter" id="get_skill_boss_id">
    </div>
    
    <script type="text/x-dot-template" id="get_skill_boss_tpl">
        <div class="topBanner">
            <div class="topItem" title='{"user_login":"{{=it.user_login}}"}' onclick="call_user_login(this)">
                <span class="circle">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianhua-jineng"></use>
              </svg>
            </span>
                <span>电话联系</span>
            </div>
                {{? it.type == 1 }}
                <div class="topItem" title='{"id":"{{=it.id}}"}' id="pay_last_money_click">
                  <span class="circle" >
                    <span class="iconfont iconPosition icon-weikuan-jineng  " style="font-size:30px;color:#999999;"></span>
                  </span>
                  <span id="pay_last_money_text" style="color:#999999;">支付尾款</span>
                </div>
                {{?? it.type == 2}}
                  <div class="topItem" title='{"id":"{{=it.id}}"}' id="pay_last_money_click" >
                    <span class="circle" >
                      <span class="iconfont iconPosition icon-weikuan-jineng  " style="font-size:30px;color:#999999;"></span>
                    </span>
                    <span id="pay_last_money_text" style="color:#999999;">尾款已付</span>
                  </div>
                {{?? it.type == 3}}
                  <div class="topItem" title='{"id":"{{=it.id}}"}' id="pay_last_money_click" onclick="pay_last_money_func(this)">
                    <span class="circle">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weikuan-jineng"></use>
                      </svg>
                    </span>
                    <span id="pay_last_money_text">支付尾款</span>
                  </div>
                {{?}}
    
    
    
        </div>
        <div class="topBox">
            <div class="topDeail">
                <div><span>预约时长:</span>{{=it.num}} 小时</div>
                <div><span>已付意向金:</span>{{=it.advance_fee}} 元</div>
                <div>
                  <span>服务总额:</span>¥{{=it.total}} 元
                  <div style="display:inline-block;height: 100%;padding-top: 2px;margin-right:5px;"><span onclick="onDetail()" tapmode class="iconfont icon-wenhao"></span>
                  </div>
    
                </div>
                <div><span>预约地点:</span>{{=it.address}}</div>
            </div>
            <div class="bottomBox">
                <div class="bottomLeftBox">
                    <img src="{{=ImgUrl+it.avatar}}" style="width:60px;height:60px;border-radius:50%;">
                    <span style="font-size:16px;color:#333333;">{{=it.user_nickname}}</span>
                    <div style="font-size:13px;color:#808080;">
                        <span>{{=it.sex==1?'男':'女'}}</span>
                        <div style="display:inline-block;width:1px;height:10px;background-color:gray;"></div>
                        <span>{{=it.birthday}}岁</span>
                    </div>
    
                </div>
                <div class="bottomRightBox">
                    <span style="font-size:16px;color:#333333;font-weight:bold;">{{=it.title}}</span>
                    <span style="font-size:13px;color:#808080;">{{=it.content}}</span>
                    {{? it.n_time}}
                    <div>
                        <span id="recordControl" class="voiceTime iconfont icon-yuyin" tapmode onclick="event.stopPropagation();playOrPause(this)"  voiceUrl="{{=ImgUrl+it.url }}">
                          &nbsp;{{=it.n_time}}&quot;</span>
                        <span class="twinkleSpan iconfont icon-yuyin"></span>
                    </div>
                    {{?}}
                </div>
            </div>
    
    
            <div class="connectBtn" title='{"other_nickname":"{{=it.user_nickname}}","other_userid":"{{=it.to_user_id}}","other_head_url":"{{=ImgUrl+it.avatar}}"}' onclick="chatOnclick(this)">与需求者沟通</div>
        </div>
     </script>
    

    相关文章

      网友评论

          本文标题:解决dot.js,初次模板渲染界面有效,再次渲染界面无效的问题

          本文链接:https://www.haomeiwen.com/subject/fxwkactx.html