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

问题描述

我实现了一个淘汰赛foreach绑定，在同一个页面中有多个模板，这里给出了一个例子，我感兴趣的是在找出一个块完成渲染的时候，我已经试过了 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-boxclass =notifcation-window> 
< div class =hover_btn tooltip_call> 
< div class =hover_call_icon>< / div> 
< span>通话< / span>< / div> 
< / a> 
< a class =sendingmshref =＃sendingms =＃sendingms> 
< 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-boxclass =notification-popup> 
< a href =＃class =close>< img class =btn_closesrc =images / box_cross.png/>< / a> < img class =centeralignsrc =images / notification_call.png/> < span>呼叫... [phone]< / span> < / DIV> 
 <！ - 关闭通知框 - > 
 <！ -  close list grey bg  - > 
< div class =tooltip_descriptionstyle =display：noneid =disp> asdsadaasdsad< / div> 
< / div> 
< / li> 
< / ul> 
  

当循环完成渲染时，我有兴趣找到成功的回调函数。

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

  myPostProcessingLogic =函数（元素）{
 $（函数（）{
 $（。list_container_callog）。 
 $（。callsms_container，this）.stop（）。animate（{left：0px}，{queue：false，duration：800}）; 
}，function（）{
 $（。callsms_container，this）.stop（）。animate（{left： -  98％}，{queue：false，duration：800}）; 
}）; 
}）; 
} 
  

在此先感谢，并告诉我有一个成功的回调： p>

解决方案

js ：

  foreach：{data：myItems，afterRender：renderedHandler} 
  

这里是文档。





在处理程序中检查渲染集合的长度是否等于items集合的长度。如果不是不执行你打算使用的完整呈现逻辑。

$ $ $ $ $ $ $
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屋！