Lightning開発と『Aura.Action』についてです。
親の持つJS処理を子コンポーネントに渡したい場合、type="Aura.Action"で値を受け渡しできます。
<aura:attribute name="onclick" type="Aura.Action" default="{!c.myAction}" description="This allows handling onClick events"/>
button.cmp
<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>
svg.cmp
<aura:component > <aura:attribute name="class" type="String" description="CSS classname for the SVG element" /> <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" /> <aura:attribute name="ariaHidden" type="String" default="true" description="aria-hidden true or false. defaults to true" /> </aura:component>
svgRenderer.js
({ render: function(component, helper) { //grab attributes from the component markup var classname = component.get("v.class"); var xlinkhref = component.get("v.xlinkHref"); var ariaHidden = component.get("v.ariaHidden"); //return an svg element w/ the attributes var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute('class', classname); svg.setAttribute('aria-hidden', ariaHidden); svg.innerHTML = '<use xlink:href="'+xlinkhref+'"></use>'; return svg; } })
AllAccounts.app
<aura:application> <div class="slds" style="margin-top:10px;margin-left:10px;"> <ltng:require styles="/resource/SLDS090/assets/styles/salesforce-lightning-design-system-ltng.css" /> <c:button class="slds-button slds-button--neutral" label="Details" svgXlinkHref="/resource/SLDS090/assets/icons/standard-sprite/svg/symbols.svg#account" svgClass="slds-icon slds-icon-text-default" onclick="{!c.showDetails}" /> </div> </aura:application>
AllAccountsController.js
({ showDetails : function(component, event, helper) { alert("showing Details") } })