Lightning コンポーネント開発者ガイド
jJavaScript での属性値の操作
JavaScript で属性値を操作するときに役に立つ、よく使用されるパターンを次に示します。
属性値を取得する
component.get(String key) および component.set(String key, Object value) は、コンポーネントの指定されたキーに関連付けられた値を取得して割り当てます。キーは、属性値を表す式として渡されます。コンポーネント参照の属性値を取得するには、component.find("cmpId").get("v.value") を使用します。同様に、コンポーネント参照の属性値を設定するには、component.find("cmpId").set("v.value", myValue) を使用します。次の例は、ID button1 のボタンで表される、コンポーネント参照の属性値を取得して設定する方法を示します。
1<aura:component>
2 <aura:attribute name="buttonLabel" type="String"/>
3 <lightning:button aura:id="button1" label="Button 1"/>
4 {!v.buttonLabel}
5 <lightning:button label="Get Label" onclick="{!c.getLabel}"/>
6</aura:component>次のコントローラアクションは、コンポーネントのボタンの label 属性値を取得し、その値を buttonLabel 属性に設定します。
1({
2 getLabel : function(component, event, helper) {
3 var myLabel = component.find("button1").get("v.label");
4 component.set("v.buttonLabel", myLabel);
5 }
6})この例では、cmp は、JavaScript コードのコンポーネントへの参照です。
コンポーネントの label 属性の値を取得するには、次のように記述します。
1var label = cmp.get("v.label");属性値を設定する
コンポーネントの label 属性の値を設定するには、次のように記述します。
1cmp.set("v.label","This is a label");属性値が定義されているかどうかを検証する
コンポーネントの label 属性が定義されているかどうかを判断するには、次のように記述します。
1var isDefined = !$A.util.isUndefined(cmp.get("v.label"));属性値が空であるかどうかを検証する
コンポーネントの label 属性が空であるかどうかを判断するには、次のように記述します。
1var isEmpty = $A.util.isEmpty(cmp.get("v.label"));