この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

JavaScript での属性値の操作

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");

属性値を深く設定する

属性に Map などのオブジェクトまたはコレクション型がある場合、式のドット表記を使用して属性値のプロパティを深く設定できます。たとえば、次のコードは user 属性の firstName プロパティを設定します。

1component.set("v.user.firstName", "Nina");

ネストが深いオブジェクトまたは属性については、ドットを繰り返し追加して構造をトラバースし、ネストされた値にアクセスします。

Map 型の user 属性が含まれるコンポーネントを見てみましょう。

1<aura:component >
2        <aura:attribute name="user" type="Map"
3          default="{
4            'id': 99,
5            'firstName': 'Eunice',
6            'lastName': 'Gomez'}" />
7    
8    <p>First Name: {!v.user.firstName}</p>
9    
10    <lightning:button onclick="{!c.deepSet}" label="Deep Set" />
11</aura:component>

コンポーネントのボタンをクリックすると、クライアント側コントローラの deepSet アクションがコールされます。

1({
2    deepSet : function(component, event, helper) {
3        console.log(component.get("v.user.firstName"));
4        component.set("v.user.firstName", "Nina");
5        console.log(component.get("v.user.firstName"));
6    }
7})

component.set("v.user.firstName", "Nina") 行は、user 属性の firstName プロパティの値を設定します。

属性値が定義されているかどうかを検証する

コンポーネントの label 属性が定義されているかどうかを判断するには、次のように記述します。

1var isDefined = !$A.util.isUndefined(cmp.get("v.label"));

属性値が空であるかどうかを検証する

コンポーネントの label 属性が空であるかどうかを判断するには、次のように記述します。

1var isEmpty = $A.util.isEmpty(cmp.get("v.label"));

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)