8

I've gone through the trailhead on components and the section on handling events with client-side controllers. Specifically the section on component events and handling bubbled events.

I have a Lightning Application that dynamically creates components inside the {!v.body} and one of those components is firing an Component event.

My question is: who will see that event?

The structure is something like this:

App
 --> Component_1
       -----> Component_1_ChildComponent_1
           --------> Component_1-ChildComponent_1_GrandChild_1
       -----> Component_1_ChildComponent_2 

So in the above structure - all the components are dynamically created and placed into the {!v.body} of the App.

If the Grandchild_1 component fires Event A. My understanding is that Component 1 should see that event?

In our app - the event is firing but not handled. If I switch to APPLICATION event instead of component event then it works but that's not what we want.

Am I mistaken or is component_1 not the value provider for those child components?

  • did you get this to work? We have the same problem, Application events work but component event don't. – Folkert Jun 3 '16 at 10:53
15
+50

So, the short answer is dynamic components do not automatically bubble events up to their parents. The good news is you can manually create the binding between the registered event (in the child) and the parent's controller method.

See SFDC's brief documentation on the subject.

Hopefully this example can help explain how to use addHandler

Let us assume Component_1.cmp has the following handler:

<aura:handler name="Cmp_1_ChildCmp_1_Evt" event="c:myCustomCmpEvt" action="{!c.handleChild}"/>

And Component_1_ChildComponent_1.cmp has the following registered event

<aura:registerEvent name="Cmp_1_ChildCmp_1_Evt" type="c:myCustomCmpEvt"/>

During the creation of Component_1_ChildComponent_1 (during the $A.createComponent's callback), you will need to assign the parent's controller's method to the child component's registered event. It will look something similar to this:

childCreater : function(component, event, helper){
    var attrs; // your child's attributes
    $A.createComponent("c:Component_1_ChildComponent_1", attrs, function(newCmp, status, statusMsg){
        newCmp.addHandler("Cmp_1_ChildCmp_1_Evt", component, "c.handleChild"); 
        // The second and third argument is what tells the child to call this 
        // component's handleChild(...) function
    });    
}, 

handleChild : function(component, event, helper) {
    // your component event handler
}

I hope this helps.

  • 1
    Thanks CodeBaker. This resolved the issue and works to ensure that the Event is contained within the Component Tree and prevents us from firing a global APPLICATION event. Awesome! Thanks. I have awarded the bounty. It may take a few hours to be awarded. :) – CoryCowgill Jul 15 '16 at 13:05
  • 1
    @CoryCowgill Ah, I see you opened a bounty on someone else's question. You still have not awarded it, fyi. – Adrian Larson Jul 20 '16 at 2:17
  • 3
    For those who tried this and got "no client action by name c.methodName" error, note that Salesforce has deprecated addHandler() method. But don't worry, we now have addEventHandler(). Here is the documentation. Cheers! – Vivek Chandrasekhar Apr 29 '18 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.