1

I'm having issues communicating to a nested component. I would like a component to be able to run a method in the nested-component's controller.js (or helper). I have tried both events and via and no luck. Here is the example markup:

<!-- myEvent.evt -->
<aura:event type="APPLICATION">
</aura:event>

<!-- super-component -->
<aura:component>
    <aura:registerEvent name="myEventName" type="c:myEvent"/>
    <c:my_Nested_Component />
    <ui:button press="{!fireEvent}"
<aura:component>



//super-component_controller.js
({
  fireEvent: function(component){
    var myEvent = component.getEvent("myEventName");
    myEvent.fire();
    console.log('event fired');
  }
})

------------------------------------------

<!-- nested-component -->
<aura:component>
    <aura:handler name="myEventName" event="c:c:myEvent" action="{!c.gotEvent}" />

<aura:component>


//nested-component_controller.js
({
  gotEvent: function(component, event){
    console.log('received event!');
  }
})

This does not work. I tried the same exact code that I placed on the nested-component on a super-super-component, and it worked perfectly.The super-super component received the event. But the nested component is not able to. I figured this had to do with events only bubbling up (though the documentation does say that that is only the case with Component events, not application events).

So the other option I read online is using aura:method. I tried doing this, but this too did not work for speaking to a nested component.

How can a parent component cause a method on the nested component to fire?

Thank you

5

I guess the application events should just work .I feel you are messing a bit with the syntax .

Lets try correcting it

The application events are fired as below

//super-component_controller.js
 ({
  fireEvent: function(component){
  var myEvent = $A.get("e.c:myEvent");
  myEvent.fire();
  console.log('event fired');
  }
})

Nested component handling

<!-- nested-component -->
<aura:component>
   <aura:handler event="c:myEvent" action="{!c.gotEvent}" />
<aura:component>

If you look at this carefully ,couple of key points

1. Application events are fired using global $A variable

2.The name on the registration component for aura:register is mandatory but its not used any where else .

  • That worked! Awesome! The next part is that every instance of the nested component received the event (all 100 of them). I guess what I can do in order to target the specific instance of the nested component is to send in the event attribute which specific instance I want to handle the request, give each instance a specific ID, likely tied to the super-component's iteration indexVar, and then have the controller on the nested component check to see if it matches its own ID. Is this the best way to do that? BTW, THANK YOU THANK YOU for getting back to me! – ZAR Feb 10 '16 at 0:28
  • 1
    I would like to look more code now on why you have 100 of them ?Is it in aura:iteration ?You can further break into individual one . – Mohith Shrivastava Feb 10 '16 at 0:34
  • Right, the super component uses Aura:iteration and the nested component is in there. Think of this application as a to-do list. The super component is the To-do list and the nested component is the actual to-do. Each to-do may have several fields on them, and while I would love to preload all of them with data, some of these fields require additional SOQL queries to populate them. Instead of running the risk of 100 tasks * 10 fields of queries, we can load a todo task when it is clicked. The other option would be to first make a bulk query and send to the application. This data can sit in – ZAR Feb 10 '16 at 0:42
  • either a JSON string that is parsed on todo item open or we could save this data in the browser local-storage. But The app already has a 4-5 second load time (aura is not that fast?) and I am wondering whether to further preload or to break it out... Does that make sense? – ZAR Feb 10 '16 at 0:43
  • 1
    I dont see any harm in loading everything at a shot .If they are rendered from aura enabled class we should be fine .But I agree on load times ,it sucks badly – Mohith Shrivastava Feb 10 '16 at 0:56

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.