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!