Mixing
Component Body is empty after init event but not from Chrome Console
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
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!
lightning-components
asked 1 hour ago
Bryce
566
add a comment |Â
up vote
2
down vote
favorite
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!
lightning-components
asked 1 hour ago
Bryce
566
add a comment |Â
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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!
lightning-components
asked 1 hour ago
Bryce
566
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!
lightning-components
lightning-components
asked 1 hour ago
Bryce
566
asked 1 hour ago
Bryce
566
asked 1 hour ago
Bryce
566
asked 1 hour ago
Bryce
566
asked 1 hour ago
Bryce
566
566
add a comment |Â
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
4
down vote
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.
answered 59 mins ago
sfdcfox
233k10179395
2
The article you linked to explains how to run code after the rendering is completed. Is there a reason you recommendsetTimeoutinstead of handling the render event as stated in the article?
– gNerb
33 mins ago
1
@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
23 mins ago
Thank you @sfdcfox
– gNerb
18 mins ago
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
4
down vote
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.
answered 59 mins ago
sfdcfox
233k10179395
2
The article you linked to explains how to run code after the rendering is completed. Is there a reason you recommendsetTimeoutinstead of handling the render event as stated in the article?
– gNerb
33 mins ago
1
@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
23 mins ago
Thank you @sfdcfox
– gNerb
18 mins ago
add a comment |Â
up vote
4
down vote
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.
answered 59 mins ago
sfdcfox
233k10179395
2
The article you linked to explains how to run code after the rendering is completed. Is there a reason you recommendsetTimeoutinstead of handling the render event as stated in the article?
– gNerb
33 mins ago
1
@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
23 mins ago
Thank you @sfdcfox
– gNerb
18 mins ago
add a comment |Â
up vote
4
down vote
up vote
4
down vote
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.
answered 59 mins ago
sfdcfox
233k10179395
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.
answered 59 mins ago
sfdcfox
233k10179395
answered 59 mins ago
sfdcfox
233k10179395
answered 59 mins ago
sfdcfox
233k10179395
answered 59 mins ago
sfdcfox
233k10179395
233k10179395
2
The article you linked to explains how to run code after the rendering is completed. Is there a reason you recommendsetTimeoutinstead of handling the render event as stated in the article?
– gNerb
33 mins ago
1
@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
23 mins ago
Thank you @sfdcfox
– gNerb
18 mins ago
add a comment |Â
2
The article you linked to explains how to run code after the rendering is completed. Is there a reason you recommendsetTimeoutinstead of handling the render event as stated in the article?
– gNerb
33 mins ago
1
@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
23 mins ago
Thank you @sfdcfox
– gNerb
18 mins ago
2
2
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
33 mins ago
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
33 mins ago
1
1
@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
23 mins ago
@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
23 mins ago
Thank you @sfdcfox
– gNerb
18 mins ago
Thank you @sfdcfox
– gNerb
18 mins ago
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f236198%2fcomponent-body-is-empty-after-init-event-but-not-from-chrome-console%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password