' P '

whatever I will forget

Auraコンポーネント 属性と式

Salesforce

コンポーネントの属性

  • コンポーネントの属性とは、値を保存できる場所.
  • 属性は、<aura:attribute> タグを使用して定義され、name属性とtype属性の値が必要.
    • name属性は変数名のようなもの.
    • type属性は、変数の型を示すようなもの. 例えば、Stringだったり、yourCustomObject__cとか.
  • 省略可能な属性が3つある。
    1. default属性: デフォルト属性値を定義します。属性の値をまだ設定していないときに属性が参照される場合に使用されます。
    2. description属性: 属性とその用途の簡単な概要を定義する
    3. required属性: 属性が必須かどうかを定義します。デフォルトは false

属性のデータ型

  • Boolean、Date、DateTime、Decimal、Double、Integer、Long、String などのプリミティブデータ型。すべてのプログラミング言語で一般的に使用されるもの
  • Account、MyCustomObject__c などの標準オブジェクト型とカスタム Salesforce オブジェクト型
  • List、Map、Set などのコレクション型
  • カスタム Apex クラス
  • Aura.Component、Aura.Component[] などのフレームワーク固有の型

式

  • name属性に指定した変数名を取り出す
    • 式は{!<expression>}で表現される.
    • 具体例としては、{!v.name.foo}.
    • vって何？
      • 値プロバイダと呼ばれるもの、自動変数、表示コンポーネント用の値プロバイダ.
  • 他コンポーネントへ値を渡す
    • <c:componentName name="{!v.name.foo}"/>
<p><c:helloMessage message="{!v.messages[0]}"/></p>
  • Loop
    <aura:iteration items="{!v.messages}" var="msg">
        <p><c:helloMessage message="{!msg}"/></p>
    </aura:iteration>
  • if
    <aura:if isTrue="{!$Browser.isIPhone}">
        <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <aura:set attribute="else">
        <p><c:helloMessage message="{!v.messages[1]}"/></p>
        </aura:set>
    </aura:if>

注意事項

属性と式でPassできるシンプルコード

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>{!v.item.Name}</p>
    <p>{!v.item.Price__c }</p>
    <p>{!v.item.Quantity__c }</p>
    <p>{!v.item.Packed__c }</p>
    <p><lightning:formattedNumber value="{!v.item.Price__c }" style="currency"/></p>
    <p><lightning:formattedNumber value="{!v.item.Quantity__c }" minimumFractionDigits ="2"/></p>
    <p><lightning:input type="toggle" label="packed?" name="packed" checked="{!v.item.Packed__c }"/></p>
</aura:component>