[Salesforce]Lightning コンポーネント‐手順３：コンポーネントコントローラ

コンポーネント

<aura:component implements="force:appHostable">
	<aura:attribute name="target" type="String" default="world"/>
    <aura:attribute name="switch" type="Boolean" default="false" />
    
    <h1>Hello, Lightning Component!!</h1>
    <h1>Hello, {!v.target}!</h1>
    <h1>ボタンクリックでON/OFF</h1>

    <aura:If isTrue="{!v.switch}">
        <p>ON</p>
        <aura:set attribute="else">
            <p>OFF</p>
        </aura:set>
    </aura:If>
    
    <ui:button label="{!v.switch ? 'OFFにする' : 'ONにする' }" press="{!c.toggle}"/>
    
</aura:component>

コントローラ

({
    toggle: function(component, event, helper) {
        var status = component.get("v.switch");
        component.set("v.switch", !status);
    }
})

動作確認する。

https://[ yourdomain ]/c/CreateComponentAppliction.app
例えば、
https://testdaeheuitest-test11-dev-ed.lightning.force.com/c/CreateComponentAppliction.app

初期画面は以下のように表示される。

Hello, Lightning Component!!
Hello, world!
ボタンクリックでON/OFF
OFF
「ONにする」ボタン

「ONにする」ボタン押下時以下のように表示される。

Hello, Lightning Component!!
Hello, world!
ボタンクリックでON/OFF
OFF
「OFFにする」ボタン