Lightning コンポーネント開発者ガイド
jクライアント側コントローラを使用したイベントの処理
各アクション関数は、コントローラが属するコンポーネント、アクションで処理するイベント、ヘルパー (使用する場合) の 3 つのパラメータを取得します。クライアント側のコントローラは、名前-値ペアの対応付けが含まれる JSON オブジェクトであることを示すために角括弧と中括弧で囲まれます。
クライアント側のコントローラの作成
クライアント側のコントローラは、コンポーネントのバンドルの一部です。これは、componentNameController.js という命名規則で自動的に結び付けられます。
開発者コンソールを使用してクライアント側のコントローラを作成するには、コンポーネントのサイドバーで [CONTROLLER (コントローラ)] をクリックします。
クライアント側のコントローラアクションのコール
HTML タグの実装が異なるイベントを見てみましょう。次のサンプルコンポーネントでは、3 つの異なるボタンを作成しますが、3 つのボタンのうち最後の 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" onclick="alert('this will not work')"/>
4 <br/>
5 <input type="button" value="Hybrid HTML Button" onclick="{!c.handleClick}"/>
6 <br/>
7 <ui:button label="Framework Button" press="{!c.handleClick}"/>
8 <br/>
9 {!v.text}
10</aura:component>クライアント側コントローラのソース
1{
2 handleClick : function(cmp, event) {
3 var attributeValue = cmp.get("v.text");
4 console.log("current text: " + attributeValue);
5
6 var target;
7 if (event.getSource) {
8 // handling a framework component event
9 target = event.getSource(); // this is a Component object
10 cmp.set("v.text", target.get("v.label"));
11 } else {
12 // handling a native browser event
13 target = event.target.value; // this is a DOM element
14 cmp.set("v.text", event.target.value);
15 }
16 }
17}on で始まるブラウザの DOM 要素イベント (onclick や onkeypress など) はすべて、コントローラアクションに結び付けることができ���す。コントローラアクションに結び付けることができるのはブラウザイベントのみです。コンポーネントの任意の JavaScript は無視されます。
JavaScript についての知識があるユーザなら、HTML タグがフレームワークの第一級オブジェクトであることを知っているため、1 番目の「Flawed」ボタンのようなものを自分で記述して試してみることをお勧めします。ただし、このフレームワークには独自のイベントシステムがあるため、この「Flawed」ボタンは機能しません。HTML タグは Lightning コンポーネントに対応付けられるため、DOM イベントは Lightning イベントに対応付けられます。
フレームワークイベントの処理
クライアント側のコンポーネントコントローラのアクションを使用して、フレームワークイベントを処理します。マウスおよびキーボードの一般的な操作に対応するフレームワークイベントは、標準コンポーネントで使用できます。
コントローラの handleClick アクションを呼び出す「Hybrid」ボタンの onclick 属性を見ていきましょう。「Framework」ボタンで使用される構文は、press 属性のある <ui:button> コンポーネントの構文と同じです。
この簡単なサンプルでは、「Framework」ボタンの操作と「Hybrid」 HTML ボタンの操作に機能的な違いはほとんどありません。ただし、コンポーネントは、障害者や補助技術を使用するユーザもアプリケーションを使用できるように、アクセシビリティを考慮して設計されます。より複雑なコンポーネントを構築する場合、再利用可能な標準コンポーネントを使用すれば、本来であれば自分で作成しなければならないプラミングの一部を標準コンポーネントが処理してくれるため、作業を簡略化できます。また、これらのコンポーネントは安全であり、パフォーマンスが最適化されています。
コンポーネントの属性へのアクセス
handleClick 関数の各アクションの最初の引数は、コントローラが属するコンポーネントです。このコンポーネントに対して最もよく行われる操作の 1 つは、その属性値の参照と変更です。
cmp.get("v.attributeName") では、attributeName 属性の値が返されます。