If you want to use c:button
, you need to create this component as well.
Create a lightning component named "button" with the following code
<aura:component >
<!-- Attributes for the button -->
<aura:attribute name="label" type="String" description="This is the button label"/>
<aura:attribute name="class" type="String" description="SLDS class"/>
<aura:attribute name="onclick" type="Aura.Action" default="{!c.myAction}" description="This allows handling onClick events"/>
<aura:attribute name="data" type="String" description="Any data to be passed via html5 data- attribute"/>
<!-- Attributes for SVG -->
<aura:attribute name="svgXlinkHref" type="String" description="svgIcon's xlink-href"/>
<aura:attribute name="svgClass" type="String" description="svgIcon CSS classname"/>
<button class="{!v.class}" onclick="{!v.onclick}" data-data="{!v.data}"><c:svg xlinkHref="{!v.svgXlinkHref}" class="{!v.svgClass}" />{!v.label}</button>
</aura:component>
for buttonController.js
, you can define a default action-
({
myAction : function(component, event, helper) {
}
})
You can change the attributes in button component according to your requirement also.
I read the documentation you mentioned in the comments and it says attribute of type Aura.Component[]
is called a facet. Then I checked the documentation about Component facet and came up with the below working example on how to use the attribute type List
in other attribute of type Aura.Component[]
:
HelloWorld.cmp
<aura:component implements="force:appHostable">
<aura:attribute name="bar" type="Aura.Component[]">
</aura:attribute>
{!v.bar}
</aura:component>
HellWorld.app:
<aura:application extends="force:slds">
<aura:attribute name="foo" type="List" default="['red','blue','green']"/>
<c:HelloWorld>
<aura:set attribute="bar">
<aura:iteration items="{!v.foo}" var="item">
<p><aura:text value="{!item}"></aura:text></p>
</aura:iteration>
</aura:set>
</c:HelloWorld>
</aura:application>
Output:
UPDATE:
I did not work much on Lightning but I was curious on how to solve the issue you are talking about in comments so I came up with this example:
HelloWorld.cmp
<aura:component implements="force:appHostable">
<aura:attribute name="bar" type="Aura.Component[]" access="global">
</aura:attribute>
<aura:attribute name="baz" type="Aura.Component[]" access="global">
</aura:attribute>
<aura:attribute name="componentNumber" type="String" access="global">
</aura:attribute>
Below are the contents of {!v.componentNumber} component: <br></br>
<div style="background-color:red">{!v.bar}</div>
<div style="background-color:yellow">{!v.baz}</div>
<div style="background-color:green">{!v.body}</div>
</aura:component>
HelloWorldApp.app
<aura:application extends="force:slds">
<aura:attribute name="foo1" type="List" default="['red','blue','green']"/>
<aura:attribute name="foo2" type="List" default="['Orange','Apple','Mango']"/>
<c:HelloWorld aura:id="first" componentNumber="1">
<aura:set attribute="bar" >
<aura:iteration items="{!v.foo1}" var="item" indexVar="i">
<p><aura:text value="{! i + ':' + item}"></aura:text></p>
</aura:iteration>
</aura:set>
</c:HelloWorld>
<c:HelloWorld aura:id="second" componentNumber="2">
<aura:set attribute="bar" >
<aura:iteration items="{!v.foo2}" var="item" indexVar="i">
<p><aura:text value="{! i + ':' + item}"></aura:text></p>
</aura:iteration>
</aura:set>
</c:HelloWorld>
<div></div>
<ui:button label="Update first component with second component body"
press="{!c.updateFirstCmp}"/>
</aura:application>
HelloWorldAppController.js:
({
updateFirstCmp : function(component, event, helper) {
debugger;
var secondCmpBdy = component.find('second').get('v.bar');
// Setting the attribute of type Aura.Component[] of first HelloWorld Component from
// second HelloWorld component attribute of type Aura.Component[]
component.find('first').set('v.baz',secondCmpBdy);
// Setting the body(type Aura.Compoent[] as per docs) of first HelloWorld Component
// from second HelloWorld component attribute of type Aura.Component[]
component.find('first').set('v.body',secondCmpBdy);
}
})
Output:
After clicking on the button: (second component still exists on the page while the content is copied to first component)
I am learning a lot from this question :)
Best Answer
Visualforce Components have a problem where they can't have attributes that reference an inner class as their type. You might be seeing something similar with your Lightning Component.
See this question: Reference inner class in Visualforce component
Try breaking
wChildItem
out into its own class.You also may need to use your namespace when referencing your inner class, if you didn't pick a namespace, your namespace is likely "c".
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_attr_types_apex.htm
<aura:attribute name="children" type="c.wChildItem[]" />