こんにちは、アンダーソンです。
今回は上級デベロッパー試験でかなりの確率で出題されていたLightningコンポーネント関連の
Trailheadをやっていきます。
モジュールごとに分けています。
今回はその2です。
属性と式
- campingListItemというコンポーネントを作成します。
- 必要なタイプ「Camping_Item__c」の「アイテム」という名前の属性を追加します
- 式を使用して、名前、価格、数量、梱包済みを表示します。
- 適切な形式の数値フィールドを使用して、「価格」と「数量」を表示します。
- トグルを使用して「パック」ステータスを表示します。
前回はどちらかというとHTMLとCSSを使って基本的なコンポーネントの理解をするって感じでしたが、今回は少し深めにやっていく感じです。
コードは下記になります。
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:true}"/>
<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>
</aura:component>camping.cmp
<aura:component>
<c:campingHeader/>
<c:campingList/>
</aura:component>campingList.cmp
<aura:component>
<c:campingListItem/>
</aura:component>引っ掛かったのが、aura:attributeタグのrequired=”true”の設定をしていないだけで
失敗になることでした。
これが必須になっていないと属性としての設定が不十分のようです。
まとめ
今回使ったのはこちら。
- aura:attribute nameが変数名でtypeで型指定する感じです。
- lightning:formattedNumber 数値のフォーマットをする際に使うタブ。styleで数値のタイプを指定できます。
- lightning:input HTMLのinputタブみたいなもんかと。今回はtypeでtoggleを指定しました。
ただなぜかエラーが返ってきます。。。
とりあえず次に進んで改修していきたいと思います。
その他の開発に関する記事はこちらです。
Developerも含めた試験問題にチャレンジしてみましょう。
コメント