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 bloc

Answer 1

I have just recently made a pull request with knockout for them to add two events to define in the binding, unwrap, then call in the correct spots before rendering the items and after all items have rendered. I haven't heard anything back from them but this does exactly what you want to do but you don't have to write hacky code to get it to work. I'm surprised that nobody has made this request before. I used these callbacks that I added to the source to destroy and reinitialize a knockout bound jquery datatable. This was the simplest solution. I have seen many attempts online that try and do it differently but this is the simplest solution.

Pull request: --> pr 1856

ko.bindingHandlers.DataTablesForEach = {

  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var nodes = Array.prototype.slice.call(element.childNodes, 0);
    ko.utils.arrayForEach(nodes, function(node) {
      if (node && node.nodeType !== 1) {
        node.parentNode.removeChild(node);
      }
    });
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
  },
  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

    var value = ko.unwrap(valueAccessor()),
      key = "DataTablesForEach_Initialized";

    var newValue = function() {
      return {
        data: value.data || value,
        beforeRenderAll: function(el, index, data) {

          if (ko.utils.domData.get(element, key)) {

            $(element).closest('table').DataTable().destroy();
          }
        },
        afterRenderAll: function(el, index, data) {
          $(element).closest('table').DataTable(value.options);
        }
      };
    };

    ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);

    //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
    if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
      ko.utils.domData.set(element, key, true);
    }

    return {
      controlsDescendantBindings: true
    };
  }
};

Knockout Datatables JSFiddle

Answer 2

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 3

Chuck Schneider's answer above is the best. I had to use containerless control as the foreach is on a tbody element:

<!-- ko template: {afterRender: SetupCheckboxes } -->
<tbody data-bind="foreach: selectedItems" id="gridBody">
  <tr>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</tbody>
<!-- /ko -->

Answer 4

In version 3.5 Knockout provides events to notify when the contents of a node have been bound

HTML

<div data-bind="childrenComplete: bindingComplete">...</div>

JavaScript

function bindingComplete(){
...
}

If you an create event binding expression at a point in the DOM that encapsulates all your child data binding expression, then it's tantamount to a page binding complete event

reference https://knockoutjs.com/documentation/binding-lifecycle-events.html

Answer 5

The solution above works great. Additionally, if you need to use the foreach "as" option you can do it as so:

data-bind="foreach: { data: myItems, afterRender: renderedHandlet, as: 'myItem'}">

Answer 6

Just wrap the foreach into another foreach loop using Knockout's container less method like this:

<!-- ko foreach:{data: Contacts, afterRender: myPostProcessingLogic }-->
<ul data-bind="foreach: $data}">
  <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>
<!-- /ko -->