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

I've written a knockout library that triggers an event when all components have been loaded and bound. It uses reference counting, similar to referencing counting used for garbage collection. I extensively use components in my project(s), including nesting many levels deep, and I can't live without knowing when everything is "ready to go". I haven't spend much time on documentation of usage, but the basics are there.

Git Hub wiki: https://github.com/ericraider33/ko.component.loader/wiki

Fiddle: https://jsfiddle.net/ericeschenbach/487hp5zf/embedded/result/

Usage HTML:

  Status: 
  


  

Usage JS:

var pageModel = { 
  loading: ko.observable(true), 
    completedCallback: function (childRef) { 
    pageModel.loading(false); 
    childRef.testValue(childRef.testValue()+1);  
  }
};

var tpRef = ko.componentLoader.ref.child({ completedCallback: pageModel.completedCallback});
var tpModel = { 
  attached: function(element) { return tpRef; },
  testValue: ko.observable(5)
};

ko.components.register('test-panel', {
    viewModel: function() { return tpModel; },
    template: '
Test Panel
From Code 
'
});


ko.componentLoader.setOptions({ verbose: true });
ko.applyBindings(pageModel, $('#ko-div')[0]);