0

I'm trying to mimic the onload attribute seen here on lightning:recordEditForm but I'm not sure this is possible. Ideally, I'd like to implement this pattern:

Child Component (UserDataService.cmp)

<aura:component controller="UserDataService">
  <aura:attribute name="onload" type="Aura.Action"/>
  <aura:attribute name="userInfoCache" type="Object" description="Current user info, system today, system now etc."/>
  <aura:handler name="init" value="{! this }" action="{! c.doInit }" />
  <aura:handler name="change" value="{! v.userInfoCache }" action="{! c.onload }"/>
</aura:component>

Controller

({
  doInit : function(component, event, helper) {
    helper.fetchUserAndSystemInfo(component); // sets v.userInfoCache
  },
  onload : function(component, event, helper) {
    return event.getParam("value"); // this is definitely not right, but not sure how to "return" this back to
  }
})

Parent Component (SomeParentThatNeedsUserData.cmp)

<!-- i want to fire onload when the attribute resolves on the child -->
<c:GC_UserDataService onload="{! c.handleUserDataServiceLoad }"/>
<aura:attribute name="userInfoCache" type="Object"/>

Parent Controller

handleUserDataServiceLoad : function(component, event, helper) {
  console.log("handleUserDataServiceLoad"); // never gets called
  console.log(event.getParam("userInfoCache"));
  component.set("v.userInfoCache", event.getParam("userInfoCache"));
},

I know that you can fire an event from the child and listen to it on the parent, but I want to listen to it only the context of the onload function to mimic the onload attribute.

I also know you can also two-way bind v.userInfoCache from child to parent (parent to child) so when it gets loaded, the reference is filled in both. But, doing this it's not apparent that something is "loading" inside my child and when it's done to handle the returned value explicitly.

2

It's recommended that you don't use Aura.Action. Instead, register an event:

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

Then, in your change handler, you would fire an event off:

onload: function(component, event, helper) {
    component.getEvent("onload")
    .setParams({ value: event.getParam("value") })
    .fire();
}

You will need to define an onload event bundle:

<aura:event type="COMPONENT">
    <aura:attribute name="value" type="Object" />
</aura:event>

You can read more in Handling Custom Events in the Lightning Component Framework and the documentation.

Note: the name of the event and the name of the handler do not need to match; I usually do this for convenience. The name of the aura:registerEvent will be exposed as an "attribute" on the component (like in your first section of code).

  • Yes, using events is the right way - but it's much less readable because I want to imply readability in the child component when I'm scanning my components. I've found a slight workaround after working on this for a bit. – tsalb Jun 4 '18 at 18:49
  • Ah nevermind, I see with this pattern you don't need to register a generic handler on the parent and it's contained only within the child. This is great! – tsalb Jun 4 '18 at 19:02

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.