jquery - knockout.js 完成渲染所有元素后的成功回调

Question

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

<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... +44 7401 287366</span> </div>
      <!-- close notification box -->
      <!-- close list gray bg -->
      <div class="tooltip_description" style="display:none" id="disp"> asdsadaasdsad </div>
    </div>
  </li>
</ul>

我有兴趣找出循环完成渲染时的成功回调。

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

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

提前感谢，并告诉我有成功回调:)

Answer 1

您在 knockout.js 中有 afterRender 回调:

foreach: { data: myItems, afterRender: renderedHandler }

Here's documentation.

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

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