5

Lets assume we have the following hierarchy of Lightning Components

<c:master>
    <c:sibling1 aura:id="sibling1" />
</c:master>

PART I

Is it possible for a child component (here sibling1) to handle an APPLICATION event registered in master's markup and fired in master's js-controller?

I have an issue with that, where I have the same handler in master and sibling1 declared, but only master is receiving (or handling) the event, but not sibling1.

Here is my code reduced to the basics

master.cmp

<aura:component controller="masterApex" implements="forceCommunity:availableForAllPageTypes,force:appHostable" >
    <aura:registerEvent   name="change"     type    ="c:changeEvent"/>
    <aura:handler         name="change"     event   ="c:changeEvent" action="{!c.handleChange}"/>
    <a><ui:outputText value="do it" click="{!c.fireTheChange}"/></a>
    <c:sibling1 aura:id="sibling1" />
</aura:component>

masterController.js

fireTheChange : function(component, event, helper) {
    console.log("fireTheChange");       
    var fireEvent = component.getEvent("change");
    fireEvent.fire();
},

handleChange : function(component, event, helper) {
    console.log("handleChange");
},

sibling1.cmp

<aura:component controller="sibling1Apex" implements="forceCommunity:availableForAllPageTypes,force:appHostable" >
    <aura:handler         name="change"     event   ="c:changeEvent" action="{!c.handleChange}"/>
</aura:component>    

sibling1Controller.js

handleChange : function(component, event, helper) {
    console.log("____R_E_C_E_I_V_E_D____");
},

changeEvent.evt

<aura:event type="APPLICATION" >
</aura:event>

Now if i click on "do click" in the console.log I got only

fireTheChange
handleChange

but I'm missing

____R_E_C_E_I_V_E_D____  

PART II

To interact with nested child components, is there only the APPLICATION event? Would a COMPONENT event work, too? Are there other ways for master of interacting with sibling1 without events at all? I found that setting sibling1's attributes from master is easy in masterController.js

var sibling1 = component.find('sibling1');
sibling1.set("v.whateverAttributeName","aNiceValue");

Now is it also possible to execute siblings controller-methods and let it rerender from within masterController.js?

Or is there an other recommend pattern for that?

7

There is a lot going on in this post so I'll give you some thoughts but can't answer everything.

1. The preferred way for parent to child communication is to use <aura:method>. See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cmp_methods.htm It should be a bit simpler than using events.

2. You declare changeEvent.evt as an application event but the syntax, component.getEvent("change"), is used for component events. Try $A.get("e.c:changeEvent") instead for an application event. See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_application.htm

3. It's probably ok to use <aura:handler name="change" ..> but try name="somethingElse" instead in case there is some side effect of name="change", which is used in automatic change handlers. See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_data_change.htm.

  • These conceptual answers are exactly what I was looking for. Thanks a lot @MarkL, I'll check them out in the next days. – Uwe Heim Oct 30 '15 at 5:35

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.