Recursive lightning component - how to know when it's fully rendered?
Have node include an event that says when it is done. It is considered done when all of its children are considered done. If it has nothing to expand, it is done at the end of the server call. Otherwise, each time a child says it's done, check to see if there are any pending. Something like this:
<aura:component>
<aura:attribute name="level" type="Integer" />
<aura:attribute name="children" type="List" access="private" />
<aura:attribute name="counter" type="Integer" default="0" />
<aura:handler name="init" value="{!this}" action="{!c.createChildren}"/>
<aura:registerEvent name="done" type="c:genericEvent" />
<li>
Level {!v.level}
<ul>
<aura:iteration items="{!v.children}" var="child">
<c:node level="{!v.level - 1}" done="{!c.check}" />
</aura:iteration>
</ul>
</li>
</aura:component>
({
createChildren : function(component, event, helper) {
var level = component.get('v.level'),
children = [];
for (var i = 0; i < level; i++) {
children.push({});
}
component.set("v.children", children);
if(!children.length) {
component.getEvent("done").fire();
}
},
check: function(component, event, helper) {
component.set("v.counter", 1 + component.get("v.counter"));
if(component.get("v.counter") === component.get("v.children").length) {
component.getEvent("done").fire();
}
}
})
The application just listens for that event, too:
<aura:application>
<ul>
<c:node level="3" done="{!c.nodesLoaded}" />
</ul>
</aura:application>
N.B. I didn't actually test this, but it should be simple enough to spot any obvious mistakes, I think.