ステップ 6: アプリケーションとイベントをインタラクティブにする

イベントで定義している属性が、起動元のコンポーネントからハンドラに渡されます。

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:event type="APPLICATION">
18    <!-- If you’re using a namespace, use myNamespace.Expense__c instead. -->
19    <aura:attribute name="expense" type="Expense__c"/>
20</aura:event>

フレームワークには、コンポーネントイベントとアプリケーションイベントという 2 種類のイベントがあります。ここでは、アプリケーションイベントを使用します。アプリケーションイベントが起動されると、ハンドラに通知されます。この場合は、form.cmp に通知されて、イベントが処理されます。

expenseList.cmp には、change="{!c.update}" で示されるクライアント側のコントローラアクションに接続されるチェックボックスが含まれていることを思い出してください。次に、update アクションを設定します。

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    update: function(component, evt, helper) {
19      var expense = component.get("v.expense");
20      //If you’re using a namespace, use e.myNamespace:updateExpenseItem instead
21      var updateEvent = $A.get("e.c:updateExpenseItem");
22      updateEvent.setParams({ "expense": expense }).fire();
23    }
24})

チェックボックスをオンまたはオフにすると、update アクションが実行され、reimbursed パラメータの値が true または false に設定されます。updateExpenseItem.evt イベントは、更新済みの expense オブジェクトを使用して起動されます。

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- If you’re using a namespace, use myNamespace:updateExpenseItem instead -->
18<aura:handler event="c:updateExpenseItem" action="{!c.updateEvent}" />

このイベントハンドラは、作成したアプリケーションイベントが起動されると updateEvent アクションを実行します。

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17updateEvent : function(component, event, helper) {
18    helper.upsertExpense(component, event.getParam("expense"));
19}

このアクションは、ヘルパー関数をコールし、{ Name : "Lunch" , Client__c : "ABC Co." , Reimbursed__c : true , CreatedDate : "2014-08-12T20:53:09.000Z" , Amount__c : 20} 形式のパラメータと値が含まれた経費オブジェクトを含む event.getParam("expense") を渡します。