Lightning コンポーネント開発者ガイド
jステップ 3: 経費データを読み込む
- をクリックし、[New Class (新規クラス)] ウィンドウで「ExpenseController」と入力します。これにより、ExpenseController.apxc という新しい Apex クラスが作成されます。
-
次のコードを入力します。
getExpenses() メソッドには、すべての経費レコードを返すための SOQL クエリが含まれています。getExpenses() メソッドの結果をコンポーネントのマークアップに表示する、form.cmp の構文 {!v.expenses} を思い出してください。
@AuraEnabled により、クライアント側およびサーバ側からコントローラメソッドへのアクセスが可能になります。サーバ側のコントローラは静的である必要があります。特定のコンポーネントのすべてのインスタンスは 1 つの静的コントローラを共有します。これらのコントローラは、リストや対応付けなど、任意の型で受け渡しできます。 -
form.cmp で、controller 属性を含めるように aura:component タグを更新します。コンポーネントの初期化時にデータを読み込むには、init ハンドラを追加します。
初期化時に、次に作成する doInit アクションが、このイベントハンドラで実行されます。この init イベントは、コンポーネントが表示される前に起動します。
-
init ハンドラに、クライアント側のコントローラアクションを追加します。サイドバーで [CONTROLLER] をクリックして、新しいリソース formController.js を作成します。次のコードを入力します。
コンポーネントの初期化時に、経費の最新の合計金額と総数が経費カウンタに反映されます。経費カウンタについては、次のステップでヘルパー関数 getExpenses(component) を使用して追加します。
-
経費レコードを表示し、カウンタを動的に更新するヘルパー関数を作成します。[HELPER] をクリックして新しいリソース formHelper.js を作成し、次のコードを入力します。
component.get("c.getExpenses") は、サーバ側アクションのインスタンスを返します。action.setCallback() は、サーバ応答の後でコールされる関数を渡します。updateTotal では、経費を取得し、金額値と経費期間の合計を求め、total および exp 属性でそれらの値を設定します。
-
変更を保存し、ブラウザを再読み込みします。
「経費オブジェクトを作成する」で作成した経費レコードが表示されます。カウンタについては、プログラムロジックを後から追加するため、この時点では動作しません。
これで、アプリケーションで経費オブジェクトが取得され、レコードがリストとして表示され、aura:iteration によって反復処理されるようになりました。カウンタには、経費の合計金額と総数が反映されます。
このステップでは、経費データを読み込む Apex コントローラクラスを作成しました。getExpenses() から、経費レコードのリストが返されます。デフォルトでは、フレームワークで getter はコールされません。メソッドにアクセスするには、そのメソッドでデータを公開する @AuraEnabled アノテーションをメソッドに付加します。コンポーネントにアクセスできるのは、コントローラクラスで @AuraEnabled アノテーションが付加されたメソッドのみです。
ExpenseController クラスを使用するコンポーネントのマークアップでは、「ステップ 2: ユーザ入力用のコンポーネントを作成する」に示すように、{!expense.name} または {!expense.id} という式で経費名または経費 ID を表示できます。
中級編
クライアント側のコントローラ定義は、角括弧および中括弧で囲まれます。中括弧は JSON オブジェクトを表し、オブジェクト内のすべてのものは名前-値のペアの対応付けです。たとえば、updateTotal は、クライアント側のアクションに対応する名前で、値は関数です。関数は、他のオブジェクトと同様に JavaScript で順に渡されます。