Knockout.js 完成渲染所有元素后的成功回调 [英] success callback after knockout.js finishes rendering all the elements

问题描述

我已经实现了一个淘汰的foreach绑定，在同一个页面中有多个模板，这里给出了一个例子，我感兴趣的是找出一个块何时完成渲染，我已经尝试过afterRender 和 afterAdd，但我猜它会针对每个元素运行，而不是在整个循环完成后运行.

<li><div class="list_container gray_bg mrgT3px"><div class="list_contact_icon"></div><div class="contact_name"><span data-bind="text: first_name"></span><span data-bind="text: last_name"></span></div><div class="contact_number"><span data-bind="text: value"></span></div><div class="callsms_container"><a href="#notification-box" class="notifcation-window"><div class="hover_btn tooltip_call"><div class="hover_call_icon"></div><span>呼叫</span></div></a><a class="sendsms" href="#sendsms" rel="#sendsms"><div class="hover_btn tooltip_sms"><div class="hover_sms_icon"></div><span>短信</span></div></a><a href="#"><div class="hover_more_btn"></div></a>

<!-- 关闭 callms 容器--><div id="notification-box" class="notification-popup"><a href="#" class="close"><img class="btn_close" src="images/box_cross.png"/></a><img class="centeralign" src="images/notification_call.png"/><span>呼叫... [phone]</span>

<!-- 关闭通知框--><!-- 关闭列表灰色 bg --><div class="tooltip_description" style="display:none" id="disp">asdsadaasdsad </div>

当循环完成渲染时，我只想找出成功回调.

这是我的 afterAdd 函数，它基本上附加了一些 jQuery 事件，没什么.

myPostProcessingLogic = 函数(元素){$(函数(){$(".list_container_calllog").hover(function(){$(".callsms_container", this).stop().animate({left:"0px"},{queue:false,duration:800});}， 功能() {$(".callsms_container", this).stop().animate({left:"-98%"},{queue:false,duration:800});});});}

提前致谢，并告诉我有一个成功回调:)

解决方案

你在 knockout.js 中有 afterRender 回调:

foreach: { 数据:myItems，afterRender:renderHandler }

这里是文档.

在您的处理程序中检查渲染集合的长度是否等于项目集合的长度.如果不是，请不要执行您打算使用的完整渲染逻辑.

renderedHandler:函数(元素，数据){if ($('#containerId').children().length === this.myItems().length) {//现在才执行处理程序}}

I have implemented a knockout foreach binding, with multiple templates in the same page, one of the example is given here, what I am interested is in finding out when a block finishes rendering, I have tried afterRender and afterAdd, but I guess it runs for each element, and not after the whole loop is finished.

<ul data-bind="foreach: {data: Contacts, afterAdd: myPostProcessingLogic}">
  <li>
    <div class="list_container gray_bg mrgT3px">
      <div class="list_contact_icon"></div>
      <div class="contact_name"><span data-bind="text: first_name"></span> <span data-bind="text: last_name"></span></div>
      <div class="contact_number"><span data-bind="text: value"></span></div>
      <div class="callsms_container">
        <a href="#notification-box" class="notifcation-window">
          <div class="hover_btn tooltip_call">
            <div class="hover_call_icon"></div>
            <span>Call</span></div>
        </a>
        <a class="sendsms" href="#sendsms" rel="#sendsms">
          <div class="hover_btn tooltip_sms">
            <div class="hover_sms_icon"></div>
            <span>SMS</span></div>
        </a>
        <a href="#">
          <div class="hover_more_btn"></div>
        </a>
      </div>
      <!-- close callsms container -->
      <div id="notification-box" class="notification-popup">
        <a href="#" class="close"><img class="btn_close" src="images/box_cross.png" /></a> <img class="centeralign" src="images/notification_call.png" /> <span>Calling... [phone]</span> </div>
      <!-- close notification box -->
      <!-- close list gray bg -->
      <div class="tooltip_description" style="display:none" id="disp"> asdsadaasdsad </div>
    </div>
  </li>
</ul>

I am interested in finding out just the success callback, when a loop finishes rendering.

here is my afterAdd function, which basically attaches some jQuery events, and nothing much.

myPostProcessingLogic = function(elements) { 
  $(function(){
      $(".list_container_callog").hover(function(){  
          $(".callsms_container", this).stop().animate({left:"0px"},{queue:false,duration:800});
      }, function() {
          $(".callsms_container", this).stop().animate({left:"-98%"},{queue:false,duration:800});
      });
  });
}

thanks in advance, and tell me there is a success callback :)

解决方案

You have the afterRender callback in knockout.js:

foreach: { data: myItems, afterRender: renderedHandler }

Here's documentation.

Inside your handler check whether the length of the rendered collection is equal to the length of the items collection. If not don't execute the full rendered logic that you intend to use.

renderedHandler: function (elements, data) {
    if ($('#containerId').children().length === this.myItems().length) {
        // Only now execute handler
    }
}

这篇关于Knockout.js 完成渲染所有元素后的成功回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！