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

クライアント側コントローラを使用したイベントの処理

クライアント側のコントローラは、コンポーネント内のイベントを処理します。これは、すべてのコンポーネントのアクションの関数を定義する JavaScript リソースです。

クライアント側コントローラは、名前-値のペアの対応付けを含む、オブジェクトリテラル表記の JavaScript オブジェクトです。この名前はそれぞれクライアント側のアクションに対応します。この値は、アクションに関連付けられた関数コードです。クライアント側コントローラは括弧および中括弧で囲まれます。アクションハンドラはカンマで区切ります (JavaScript マップと同様に)。

1({
2    myAction : function(cmp, event, helper) {
3        // add code for the action
4    },
5
6    anotherAction : function(cmp, event, helper) {
7        // add code for the action
8    }
9})

各アクション関数は、次の 3 つのパラメータを取得します。

cmp — コントローラが属するコンポーネント。
event — アクションが処理しているイベント。
helper — コンポーネントのヘルパーであり、省略可能です。ヘルパーには、コンポーネントのバンドルの JavaScript コードで再利用できる関数があります。

クライアント側のコントローラの作成

クライアント側のコントローラは、コンポーネントのバンドルの一部です。これは、componentNameController.js という命名規則で自動的に結び付けられます。

開発者コンソールを使用してクライアント側のコントローラを作成するには、コンポーネントのサイドバーで [CONTROLLER (コントローラ)] をクリックします。

クライアント側のコントローラアクションのコール

標準の Lightning コンポーネントである、<lightning:button> を含む HTML ボタンとは対照的に、次のコンポーネントの例では 2 つのボタンが作成されます。これらのボタンをクリックすると、text コンポーネントの属性が指定された値で更新されます。target.get("v.label") は、ボタンの label 属性の値を参照します。

コンポーネントのソース

1<aura:component>
2    <aura:attribute name="text" type="String" default="Just a string. Waiting for change."/>
3    <input type="button" value="Flawed HTML Button"
4        onclick="alert('this will not work')"/>
5    <br/>
6    <lightning:button label="Framework Button" onclick="{!c.handleClick}"/>
7    <br/>
8    {!v.text}
9</aura:component>

JavaScript についての知識があるユーザなら、HTML タグがフレームワークの第一級オブジェクトであることを知っているため、1 番目の「Flawed」ボタンのようなものを自分で記述して試してみることをお勧めします。ただし、コンポーネント内の任意の JavaScript (alert() コールなど) は無視されるため、この「Flawed」ボタンは機能しません。

フレームワークには独自のイベントシステムがあります。HTML タグは Lightning コンポーネントに対応付けられるため、DOM イベントは Lightning イベントに対応付けられます。

on で始まるブラウザの DOM ��素イベント (onclick や onkeypress など) はすべて、コントローラアクションに結び付けることができます。コントローラアクションに結び付けることができるのはブラウザイベントのみです。

「Framework」ボタンは、<lightning:button> コンポーネントの onclick 属性をコントローラの handleClick アクションに結び付けます。

クライアント側コントローラのソース

1({
2    handleClick : function(cmp, event) {
3        var attributeValue = cmp.get("v.text");
4        console.log("current text: " + attributeValue);
5
6        var target = event.getSource();
7        cmp.set("v.text", target.get("v.label"));
8    }
9})

handleClick アクションは event.getSource() を使用して、このコンポーネントイベントを起動する参照元コンポーネントを取得します。この場合、参照元コンポーネントはマークアップの <lightning:button> です。

次に、コードは text コンポーネント属性の値をボタンの label 属性の値に設定します。text コンポーネント属性は、マークアップの <aura:attribute> タグに定義されています。

コンポーネント内のクライアント側アクションとサーバ側アクションには一意の名前を使用します。JavaScript 関数 (クライアント側アクション) と Apex メソッド (サーバ側アクション) が同じ名前だと、問題が発生したときにデバッグしにくくなるおそれがあります。デバッグモードでは、フレームワークによって、クライアント側アクション名とサーバ側アクション名の競合に関するブラウザコンソールの警告が記録されます。

ヒント

フレームワークイベントの処理

クライアント側のコンポーネントコントローラのアクションを使用して、フレームワークイベントを処理します。マウスおよびキーボードの一般的な操作に対応するフレームワークイベントは、標準コンポーネントで使用できます。

コンポーネントの属性へのアクセス

handleClick 関数の各アクションの最初の引数は、コントローラが属するコンポーネントです。このコンポーネントに対して最もよく行われる操作の 1 つは、その属性値の参照と変更です。

cmp.get("v.attributeName") では、attributeName 属性の値が返されます。

cmp.set("v.attributeName", "attribute value") では、attributeName 属性の値が設定されます。

コントローラでの別のアクションの呼び出し

アクションメソッドを別のメソッドからコールするには、共通のコードをヘルパー関数に配置し、helper.someFunction(cmp) で呼び出します。

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