Lightning コンポーネント開発者ガイド
jステップ 3: 経費データを読み込む
- をクリックし、[New Class (新規クラス)] ウィンドウで「ExpenseController」と入力します。これにより、ExpenseController.apxc という新しい Apex クラスが作成されます。
-
次のコードを入力します。
1public with sharing class ExpenseController { 2 @AuraEnabled 3 public static List<Expense__c> getExpenses() { 4 5 // Perform isAccessible() check here 6 return [SELECT Id, Name, Amount__c, Client__c, Date__c, 7 Reimbursed__c, CreatedDate FROM Expense__c]; 8 } 9}getExpenses() メソッドには、すべての経費レコードを返すための SOQL クエリが含まれています。getExpenses() メソッドの結果をコンポーネントのマークアップに表示する、form.cmp の構文 {!v.expenses} を思い出してください。
@AuraEnabled により、クライアント側およびサーバ側からコントローラメソッドへのアクセスが可能になります。サーバ側のコントローラは静的である必要があります。特定のコンポーネントのすべてのインスタンスは 1 つの静的コントローラを共有します。これらのコントローラは、リストや対応付けなど、任意の型で受け渡しできます。 -
form.cmp で、controller 属性を含めるように aura:component タグを更新します。
1<aura:component controller="ExpenseController"> -
コンポーネントの初期化時にデータを読み込むには、init ハンドラを追加します。
初期化時に、次に作成する doInit アクションが、このイベントハンドラで実行されます。この init イベントは、コンポーネントが表示される前に起動します。
1<aura:component controller="ExpenseController"> 2 <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 3 <!-- Other aura:attribute tags here --> 4 <!-- Other code here --> 5</aura:component> -
init ハンドラに、クライアント側のコントローラアクションを追加します。サイドバーで [CONTROLLER] をクリックして、新しいリソース formController.js を作成します。次のコードを入力します。
1({ 2 doInit : function(component, event, helper) { 3 //Update expense counters 4 helper.getExpenses(component); 5 },//Delimiter for future code 6})コンポーネントの初期化時に、経費の最新の合計金額と総数が経費カウンタに反映されます。経費カウンタについては、次のステップでヘルパー関数 getExpenses(component) を使用して追加します。 -
経費レコードを表示し、カウンタを動的に更新するヘルパー関数を作成します。[HELPER] をクリックして新しいリソース formHelper.js を作成し、次のコードを入力します。
component.get("c.getExpenses") は、サーバ側アクションのインスタンスを返します。action.setCallback() は、サーバ応答の後でコールされる関数を渡します。updateTotal では、経費を取得し、金額値と経費期間の合計を求め、total および exp 属性でそれらの値を設定します。
1({ 2 getExpenses: function(component) { 3 var action = component.get("c.getExpenses"); 4 action.setCallback(this, function(response) { 5 var state = response.getState(); 6 if (component.isValid() && state === "SUCCESS") { 7 component.set("v.expenses", response.getReturnValue()); 8 this.updateTotal(component); 9 } 10 }); 11 $A.enqueueAction(action); 12 }, 13 updateTotal : function(component) { 14 var expenses = component.get("v.expenses"); 15 var total = 0; 16 for(var i=0; i<expenses.length; i++){ 17 var e = expenses[i]; 18 19 //If you’re using a namespace, use e.myNamespace__Amount__c instead 20 total += e.Amount__c; 21 } 22 //Update counters 23 component.set("v.total", total); 24 component.set("v.exp", expenses.length); 25 },//Delimiter for future code 26 27}) -
変更を保存し、ブラウザを再読み込みします。
「経費オブジェクトを作成する」で作成した経費レコードが表示されます。カウンタについては、プログラムロジックを後から追加するため、この時点では動作しません。
これで、アプリケーションで経費オブジェクトが取得され、レコードがリストとして表示され、aura:iteration によって反復処理されるようになりました。カウンタには、経費の合計金額と総数が反映されます。
このステップでは、経費データを読み込む Apex コントローラクラスを作成しました。getExpenses() から、経費レコードのリストが返されます。デフォルトでは、フレームワークで getter はコールされません。メソッドにアクセスするには、そのメソッドでデータを公開する @AuraEnabled アノテーションをメソッドに付加します。コンポーネントにアクセスできるのは、コントローラクラスで @AuraEnabled アノテーションが付加されたメソッドのみです。
ExpenseController クラスを使用するコンポーネントのマークアップでは、「ステップ 2: ユーザ入力用のコンポーネントを作成する」に示すように、{!expense.name} または {!expense.id} という式で経費名または経費 ID を表示できます。
中級編
クライアント側のコントローラ定義は、角括弧および中括弧で囲まれます。中括弧は JSON オブジェクトを表し、オブジェクト内のすべてのものは名前-値のペアの対応付けです。たとえば、updateTotal は、クライアント側のアクションに対応する名前で、値は関数です。関数は、他のオブジェクトと同様に JavaScript で順に渡されます。