Lightning コンポーネント開発者ガイド
jクライアント側コントローラを使用したイベントの処理
クライアント側のコントローラは、名前-値ペアの対応付けが含まれる JSON オブジェクトであることを示すために角括弧と中括弧で囲まれます。
1({
2 myAction : function(cmp, event, helper) {
3 // add code for the action
4 }
5})各アクション関数は、次の 3 つのパラメータを取得します。
- cmp — コントローラが属するコンポーネント。
- event — アクションが処理しているイベント。
- helper — コンポーネントのヘルパーであり、省略可能です。ヘルパーには、コンポーネントのバンドルの JavaScript コードで再利用できる関数があります。
クライアント側のコントローラの作成
クライアント側のコントローラは、コンポーネントのバンドルの一部です。これは、componentNameController.js という命名規則で自動的に結び付けられます。
開発者コンソールを使用してクライアント側のコントローラを作成するには、コンポーネントのサイドバーで [CONTROLLER (コントローラ)] をクリックします。
クライアント側のコントローラアクションのコール
標準の Lightning コンポーネントである、<ui: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 <ui:button label="Framework Button" press="{!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」ボタンは、<ui:button> コンポーネントの press 属性をコントローラの 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() を使用して、このコンポーネントイベントを起動するソースコンポーネントを取得します。この場合、ソースコンポーネントはマークアップの <ui:button> です。
次に、コードは text コンポーネント属性の値をボタンの label 属性の値に設定します。text コンポーネント属性は、マークアップの <aura:attribute> タグに定義されています。
フレームワークイベントの処理
クライアント側のコンポーネントコントローラのアクションを使用して、フレームワークイベントを処理します。マウスおよびキーボードの一般的な操作に対応するフレームワークイベントは、標準コンポーネントで使用できます。
コンポーネントの属性へのアクセス
handleClick 関数の各アクションの最初の引数は、コントローラが属するコンポーネントです。このコンポーネントに対して最もよく行われる操作の 1 つは、その属性値の参照と変更です。
cmp.get("v.attributeName") では、attributeName 属性の値が返されます。
cmp.set("v.attributeName", "attribute value") では、attributeName 属性の値が設定されます。