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

You must log in to answer this question.

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