5

I have 1 main component (Parent.cmp) which includes 2 components (Brother1.cmp and Brother2.cmp).

Brother1 fires an event which should cause an action in Brother2.

Documentation says that we should use APPLICATION events for that:

Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

I've created an APPLICATION event and fire it from Brother1. According to the documentation, I expect the event to be distributed to Brother2. It is handled by Parent.cmp, but it never gets to Brother2.

What I tried:

  1. as the Parent.cmp receives the Brother1 event, I tried to fire a new Parent_evt APPLICATION event hoping it will be dispatched to Brother2. No success.
  2. The expression var brother1Event = $A.get("e.c:Brother1_evt"); doesn't work in my code, and even doesn't seem to be firing any event at all.

What am I missing ?

Thank you for your help.

Components code below:

TestEvents.app:

<aura:application extends="force:slds">
    <c:Parent/>
</aura:application>

Parent.cmp

<aura:handler name="Brother1_evt" event="c:Brother1_evt" action="{!c.handleBrother1_evt}" />

<aura:attribute name="message" type="string" />
Parent message: <ui:outputtext value="{!v.message}" />

<div>
    <c:Brother1/>
</div>

<div>
    <c:Brother2/>
</div>

ParentController.js:

({
handleBrother1_evt : function(component, event, helper) {
    component.set( "v.message", "Brother1 event Received");
}

})

Brother1.cmp

<aura:component >

<aura:registerEvent name="Brother1_evt" type="c:Brother1_evt" />

<aura:attribute name="message" type="string" />
<aura:handler name="Brother1_evt" event="c:Brother1_evt" action="{!c.handleBrother1_evt}" />

<lightning:button label="Click Me to fire an event from Brother 1!" variant="brand" onclick="{!c.handleBrother1Click}" />
<br/>
Brother 1 message: <ui:outputText value="{!v.message}" />

Brother1_evt.evt

<aura:event type="APPLICATION" description="Event template" />

Brother1Controller.js

({
handleBrother1Click : function(component, event, helper) {

    var brother1Event = component.getEvent("Brother1_evt");
    brother1Event.fire();
},

handleBrother1_evt : function(component, event, helper) {
    component.set( "v.message", "Brother1 event Received");
}

Brother2.cmp

<aura:component >

<aura:handler name="Brother1_evt" event="c:Brother1_evt" action="{!c.handleBrother1_evt}" />

<aura:attribute name="message" type="string" />
Brother 2 message: <ui:outputText value="{!v.message}" />

Brother2Controller.js

({

handleBrother1_evt : function(component, event, helper) {
    component.set( "v.message", "Brother1 event Received");
}

})

Output:

enter image description here

2
  • Can you try removing name attribute from the handler as the doc quotes The handler for an application event won’t work if you set the name attribute in <aura:handler>. Use the name attribute only when you’re handling component events. Commented Dec 26, 2018 at 16:51
  • 1
    @codeyinthecloud That really should have been an answer. Also, it's exactly what I said.
    – sfdcfox
    Commented Dec 26, 2018 at 16:51

1 Answer 1

7

As stated in the documentation:

The handler for an application event won’t work if you set the name attribute in <aura:handler>. Use the name attribute only when you’re handling component events.

You need to remove the "name" attribute.

2
  • 2
    +1 You beat me by seconds! Commented Dec 26, 2018 at 16:54
  • Yes. It works. Many thanks. I promise to read the documentation with greater attention in the future. NB: sorry for the late response. I was sick in the last days.
    – fredbe
    Commented Dec 30, 2018 at 12:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .