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