Lightning Components: Triggering Controller Methods on Child Component based on Passed Variables

Question

Background: I have a lightning component I have been working on for our Lightning Community to categorize Community Groups. I have built a List of Strings via js/helpers/controller which I then store into an attribute called categoryList that holds our list of Category Strings from our custom object. I am then iterating through this list and passing each single category string to a child component:

<aura:attribute name="categoryList" type="List" />

<aura:iteration items="{!v.categoryList}" var="cat" indexVar="idx">
    <c:MSI_GroupItem2 category="{!cat}" index="{!idx}" />         
</aura:iteration>

In the child component, I want to run another Controller Method that gets all of the associated CollaborationGroup records that are related to that category into a List attribute of type CollaborationGroup called groupList, so that I can then iterate through / display them in the child component for that category.

On page load, my child component is rendered and correctly displays the custom category names in the <h1> Header, but I can't seem to get the secondary method to run to populate my groupList attribute based on each child instances Category to display the groups within those categories.

The console doesn't show any indication of my javascript console.log messages that I've put into the jsController and helper for the child component, and my Debug Log in Salesforce doesn't show any of the System.debug strings in my controller method. This leads me to assume that none of this code is being executed on or after page load, but I don't know why. I'm treating this child component just like the parent component, and have tried to use both a doneRendering handler event and the AfterScriptsLoaded parameter on scripts. Neither seem to fire. What am I doing wrong?

Child Component (.cmp):

<aura:component implements="forceCommunity:availableForAllPageTypes" controller="MSI_GroupCtrl">
<aura:attribute name="category" type="String" />
<aura:attribute name="groupList" type="CollaborationGroup[]" default="['red','green','blue']" />
<aura:attribute name="index" type="Integer" />
<aura:handler event="aura:doneRendering" action="{!c.doInit}"/> <!-- TRIED THIS -->

<ltng:require scripts="/resource/bootstrap3_3_6dist/bootstrap-3.3.6-dist/js/bootstrap.min.js" 
styles="/resource/bootstrap3_3_6dist/bootstrap-3.3.6-dist/css/bootstrap.min.css"
afterScriptsLoaded="{!c.doInit}" /> <!-- TRIED THIS -->

<div class="panel panel-default">
    <div class="panel-body">
        <div>
            <h1>{!v.category}</h1>
            <aura:iteration items="{!v.groupList}" var="group" indexVar="idx">
                {!group} <br />
            </aura:iteration>
            </div>
    </div>
</div>

Child Component JS Controller (.js):

({
    doInit : function(component, event, helper) {
        console.log('MM doInit?');
        helper.getGroupsByCat(component);
    },
})

Child Component Helper (Helper.js):

({  
    getGroupsByCat : function(component) {
        var action = component.get("c.getGroupsByCat2");
        action.setParams({ 
            "categoryName": component.get("v.category")
        }); 

        action.setCallback(this, function(response) {
            var state = response.getState();
            console.log('MM2 GetGroupsByCat2 Response State = ' + state);
            console.log('MM2 Is Component2 valid?' + component.isValid());
            if (component.isValid() && state === "SUCCESS") {
                var groups = response.getReturnValue();
                console.log('MM GROUPS VAR2: ' + groups);
                component.set("v.groupList", groups);
                console.log('MM Component2 Get VGroups AFter Set: ' + component.get("v.groupList"));
            }
        });
        $A.enqueueAction(action);
     },
 })

ApexController.getGroupsByCat2:

@AuraEnabled
public static List<CollaborationGroup> getGroupsByCat2(String categoryName){
    System.debug('MM getGroupsByCat2 Received String: ' + categoryName);
    List<CollaborationGroup> result = new List<CollaborationGroup>();
    Set<Id> collaborationGroupIds = new Set<Id>();
    for(Community_Group_Category__c cgc : [SELECT Id,Name,Active__c,Collaboration_Group_Id__c,Category__c FROM Community_Group_Category__c WHERE Category__c = :categoryName]){
        Id CollaborationGroupId = Id.ValueOf(cgc.Collaboration_Group_Id__c);
        if(cgc.Active__c){
            if(!collaborationGroupIds.contains(CollaborationGroupId)){
                collaborationGroupIds.add(collaborationGroupId);
            }
        }
    }

    for(CollaborationGroup cg : [SELECT Id,Name,MemberCount,CollaborationType,Description,CanHaveGuests,NetworkId FROM CollaborationGroup WHERE CollaborationType = 'Public' AND Id in :collaborationGroupIds]){
        result.add(cg);     
    }

    return result;
}

Answer 1

The answer to this question is understanding the rendering lifecycle of the components .

The couple of very useful docs for the same are here

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_lifecycle.htm

https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-1.html

The both the links explain the cycle completely and something to keep in mind .

One thing for sure is init function always fires and bubbles from child to parent and hence init will always ensure your actions are executed and you decouple from the rendering of the component .

Hence always use init event for the same and add the below event to the code

 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>