tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning開発と『Aura.Action』について

Lightning開発と『Aura.Action』についてです。

f:id:tyoshikawa1106:20160113215540p:plain

Build a Button Component Step | Salesforce Trailhead


親の持つ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")
    }
})


f:id:tyoshikawa1106:20160113215504p:plain