3

I've a weird behaviour going on here. I've built a custom card carousel component as below :

<c:carouselComponent aura:id="carousel"
                        iconName="standard:carousel"
                        title="Cards"
                        showTotal="true">

<aura:iteration aura:id="iterator" items="{!v.data}" var="content">
      <c:carouselCardComponent      
                                    title="{!content.title}"
                                    imageSrc="{!content.thumbnail}"
                                     >
      </c:carouselCardComponent>                                                  
</aura:iteration>

</c:carouselComponent>

And this is what happens from c:carouselComponent controller in init handler :

onInit: function(component, event, helper) {
    var body = component.get('v.body');
    var cards = [];

    body.forEach(function(el) {
        if (el.getLocalId() === 'iterator') {
            console.log(el.get('v.body'));
            var children = el.get('v.body');
            cards = children;

        } else {
            cards.push(el);
        }
    });
...

Nothing is actually showing in the carousel because the carouselComponent body seems to be empty after it's rendered : console.log(el.get('v.body')) returns an empty array.

But when i visualize the el object directly from Chrome Console, el.get('v.body') is not an empty array but it contains all the objects created by the aura:iteration component .

What is actually happenning? i think i'm missing something and i don't know how to figure it out.

Thank you for any idea!

1 Answer 1

6

aura:valueInit is always the first event fired in the rendering life cycle for new components, before anything else happens, including rendering anything inside aura:iteration. You'd have to wait until at least the first rendering cycle completes. You should be able to simply do something like the following:

setTimeout(
  $A.getCallback(
    function() { 
      helper.postRenderHandler(component, event, helper);
    }
  )
);

You might also get away with registering an aura:valueChange handler on the body attribute, but you'll have to be careful to avoid infinite recursion.

2
  • 3
    The article you linked to explains how to run code after the rendering is completed. Is there a reason you recommend setTimeout instead of handling the render event as stated in the article?
    – gNerb
    Oct 16, 2018 at 16:38
  • 3
    @gNerb because it requires a full render cycle. The components will not exist any time during the first render cycle. This is a pecularity of aura:iteration, which performs its own rendering later.
    – sfdcfox
    Oct 16, 2018 at 16:47

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.