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

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

1<aura:event type="COMPONENT">
2    <!-- If you’re using a namespace, use myNamespace.Expense__c instead. -->
3    <aura:attribute name="expense" type="Expense__c"/>
4</aura:event>

コンポーネントイベントを使用します。expenseList.cmp には [Reimbursed? (払い戻し済み?)] チェックボックスが含まれていることを思い出してください。

1<aura:registerEvent name="updateExpense" type="c:updateExpenseItem"/>

[Reimbursed? (払い戻し済み?)] チェックボックスは、change="{!c.update}" で示されるクライアント側のコントローラアクションに結び付けられます。次に、update アクションを設定します。

1({
2    update: function(component, evt, helper) {
3      var expense = component.get("v.expense");
4      // Note that updateExpense matches the name attribute in <aura:registerEvent>
5      var updateEvent = component.getEvent("updateExpense");
6      updateEvent.setParams({ "expense": expense }).fire();
7    }
8})

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

1<aura:handler name="updateExpense" event="c:updateExpenseItem" action="{!c.updateEvent}" />

このイベントハンドラは、作成したコンポーネントイベントが起動されると updateEvent アクションを実行します。<aura:handler> タグは、c:expenseList の <aura:registerEvent> タグと同じ name 属性の値 updateExpense を使用します。

1updateEvent : function(component, event, helper) {
2    helper.upsertExpense(component, event.getParam("expense"));
3}

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