success callback after knockout.js finishes rendering all the elements

Question

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... +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> 

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 :)

Answer 1

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

Answer 2

Try wrapping the ul with

<div data-bind='template: {afterRender: myPostProcessingLogic }'> 

It will only work the first time everything within the template is rendered. But you will only get the one call to myPostProcessingLogic. Here's a fiddle

<div data-bind='template: {afterRender: myPostProcessingLogic }'>   <ul data-bind="foreach: Contacts">     <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> </div>