KnockoutJS afterRender callback when all nested Components have been rendered?

Question

I have a hierarchy of nested KnockoutJS Components using 3.2.0. It\'s working very well but I\'m looking to execute some code once my entire hierarchy of components has been loa

Answer 1

If you'r working with ko.components this might be of use:

1) Create a deferred object to keep track of each component loading

var statusX = $.Deferred()
var statusY = $.Deferred()

2) Inform knockout to tell you when the component is loaded and ready

ko.components.get('x-component', statusX.resolve) //Note: not calling resolve, but passing the function
ko.components.get('y-component', statusY.resolve)

3) Synch up both status deferreds

$.when(statusX.promise(), statusY.promise())
 .done( function allComponentsLoaded(componentX, componentY){ 
            //Both components are ready here 
            //Note the arguments from the function comes via
            //ko->jquery deferred resolve
           });