Aura コンポーネントの基本その3【Trailhead】

こんにちは、アンダーソンです。
今回は上級デベロッパー試験でかなりの確率で出題されていたLightningコンポーネント関連の
Trailheadをやっていきます。

モジュールごとに分けています。
今回はその3です。

コントローラを使用したアクションの処理

• Packed！というラベルの付いたボタンを追加します。クリックすると、packItem controller関数を呼び出します。
• コントローラー機能は次のことを行う必要があります。
  • trueの値を使用して、アイテム属性をパック済みとしてマークします。
  • trueの値を使用して無効属性をマークすることにより、ボタンを無効にします。

前回作成したコンポーネントに動きを付けていく作業になります。
今回よりコントローラとしてJavaScriptを書いていくことになります。

コードは下記になります。

campingListItem.cmp

<aura:component>
    <aura:attribute name="Item" type="Camping_Item__c" required="true"
    default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"/>
    <p>Name:<ui:outputText value="{!v.item.Name}"/></p>
    <p>Price:<lightning:formattedNumber value="{!v.Item.Price__c}" style="currency"/></p>
    <p>Quantity:<lightning:formattedNumber value="{!v.Item.Quantity__c}"/></p>
    <p><lightning:input type="toggle" label="Packed?" name="Packed" checked="{!v.Item.Packed__c}"/></p>
    <lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>

デフォルトのPacked__cをfalseに変更したのと、ボタンを追加しています。
Onclickのc.はコントローラ(ここではJavaScript)をつなげるプロバイダです。

campingListItemController.js

({
    packItem : function(component, event, helper) {
        component.set("v.Item.Packed__c",true);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
    },
})

今回の要件はボタンをクリックするとPackがTrueになり、一度押すともう押せないようにしてね。
なので、setでTrueにしてから、押したボタンを取得してDisableをTrueに変更してます。

まとめ

今回使ったのはこちら。

• lightning:button　Onclickでコントローラを呼び出しました。
• コントローラとしてのJavaScript

ちなみに前回のエラーはデフォルトを設定していなかったのが原因でした。
今回は動作も問題なく、今のところしっかり追いつけているのでこのままやっていきます。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。