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

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

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

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

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

HTML タグの実装が異なるイベントを見てみましょう。次のサンプルコンポーネントでは、3 つの異なるボタンを作成しますが、3 つのボタンのうち最後の 2 つのボタンのみが機能します。これらのボタンをクリックすると、text コンポーネントの属性が指定された値で更新されます。target.get("v.label") は、ボタンの label 属性の値を参照します。

コンポーネントのソース

1swfobject.registerObject("clippy.codeblock-0", "9");<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>
11

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

1swfobject.registerObject("clippy.codeblock-1", "9");{
2    handleClick : function(component, event) {
3        var attributeValue = component.get("v.text");
4        aura.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            component.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            component.set("v.text", event.target.value);
15        }
16    }
17}
18

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 つは、その属性値の参照と変更です。

component.get("v.<attributeName>") では、<attributeName> 属性の値が返されます。aura.log() ユーティリティ関数は、ブラウザコンソールの検出を試みて、そこに属性値を記録します。

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

アクションメソッドを別のメソッドからコールするには、ヘルパー関数を使用して、helper.someFunction(component) で呼び出します。ヘルパーリソースには、コンポーネントのバンドルの JavaScript コードで再利用できる関数があります。