As per the doc:
The root-level tag of every component is aura:component. Every component inherits the body attribute from <aura:component>.
The body attribute has type Aura.Component[]. It can be an array of one component, or an empty array, but it's always an array.
The tag can contain tags, such as <aura:attribute>, <aura:registerEvent>, <aura:handler>, <aura:set>, and so on. Any free markup that is not enclosed in one of the tags allowed in a component is assumed to be part of the body and is set in the body attribute.
Setting the body content is equivalent to wrapping that free markup inside <aura:set attribute="body">
As given in the example, i tried this:
Component:
<aura:component>
<div>Body part</div>
<ui:button label="Push Me" press="{!c.printCmpBody}"/>
</aura:component>
Controller.js
({
printCmpBody : function(cmp) {
console.log("button pressed",cmp.get("v.body"); // got empty array
},
})
Since the body attribute is implicitly set, I thought it would return array of 2 elements in it. But I got an empty array.
So I tried to set the body attribute explicitly using aura:set
, i got the same result.
If I remove the <div/>,<ui:button/>
and create it dynamically using $A.createComponent
, i'd be doing this:
cmp.set("v.body",dynCmps)
where dynCmps contains the respective <div/>,<ui:button/>
component instances, and it renders in the browser.
And if i do console.log("button pressed",cmp.get("v.body");
i get array with two elements.
So Including the markup <div/>,<ui:button />
alone, also does the same thing(renders in the browser), which means cmp.set("v.body")
should have take place somewhere.So I'm wondering, why cmp.get("v.body")
is returning empty array.
Is this the way component.get("v.body") suppose to work?