こんにちは、アンダーソンです。
今回は上級デベロッパー試験でかなりの確率で出題されていた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も含めた試験問題にチャレンジしてみましょう。
コメント