More than 5 years have passed since last update.

ステップバイステップでLightningコンポーネントを楽しもう！ - モジュール3

Last updated at 2015-09-03Posted at 2015-09-03

コンポーネントコントローラを使ってみよう

コンポーネントにクライアント側のコントローラを作ります。
(Apexのコントローラはサーバ側のコントローラとなります。)

画面イメージ

ソース

m03_ClientSideController.cmp

<aura:component implements="force:appHostable">

    <aura:attribute name="switch" type="Boolean" default="false" />

    <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>

コンポーネントコントローラは開発コンソール内の右サイドバーで[CONTROLLER]をクリックしてファイルを作成します。

m03_ClientSideControllerController.js

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