カスタムコンポーネントイベントを使ってみよう
カスタムのコンポーネントイベントを作成し利用します。
画面イメージ
ソース
Apex
モジュール 7のApexクラス(LeadController.cls)にメソッドを追加します。
@AuraEnabled
public static List<Lead> findByLastName(String searchKey) {
String lastName = '%' + searchKey + '%';
return [SELECT Id, LastName, Company FROM Lead WHERE LastName LIKE :lastName ORDER BY LastModifiedDate DESC LIMIT 50];
}
コンポーネントイベント
[File] > [New] > [Lightning Event]で[Name]に「SearchKeyChangeEvent」と入力しファイルを作成します。
<!-- コンポーネントイベント -->
<aura:event type="COMPONENT">
<aura:attribute name="searchKey" type="String"/>
</aura:event>
コンポーネント
モジュール 8のソース(m08_Helper)を拡張します。
<aura:component controller="LeadController" implements="force:appHostable">
<aura:attribute name="leads" type="Lead[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- コンポーネントイベント登録 -->
<aura:registerEvent name="searchKeyChange" type="c:SearchKeyChangeEvent"/>
<!-- コンポーネントイベント購読 -->
<aura:handler name="searchKeyChange" action="{!c.search}"/>
<h3>リード表示</h3>
<ui:inputText aura:id="searchkey" label="姓" labelClass="assistiveText" placeholder="姓で検索" keyup="{!c.searchKeyChange}" updateOn="keyup"/>
<ui:button label="更新" press="{!c.refresh}"/>
<ul>
<aura:iteration items="{!v.leads}" var="lead">
<li>
<p>
{!lead.Company}<br/>
{!lead.LastName}
</p>
</li>
</aura:iteration>
</ul>
</aura:component>
({
// initイベント処理
doInit: function(component, event, helper) {
helper.getLeads(component);
},
// 更新ボタンクリック
refresh: function(component, event, helper) {
var searchKey = component.find("searchkey").get("v.value");
if ($A.util.isEmpty(searchKey)) {
searchKey = "";
}
helper.getLeadsByName(component, searchKey);
},
// keyup
searchKeyChange: function(component, event, helper) {
// コンポーネントイベント発火
var searchKeyChangeEvent = component.getEvent("searchKeyChange");
searchKeyChangeEvent.setParams({
"searchKey": component.find("searchkey").get("v.value"),
});
searchKeyChangeEvent.fire();
},
// コンポーネントイベント処理
search: function(component, event, helper) {
// イベントの属性値を取得
var searchKey = event.getParam("searchKey");
if ($A.util.isEmpty(searchKey)) {
searchKey = "";
}
helper.getLeadsByName(component, searchKey);
},
})
({
getLeads: function(component) {
var action = component.get("c.findAll");
action.setCallback(this, function(a){
component.set("v.leads", a.getReturnValue());
});
$A.enqueueAction(action);
},
getLeadsByName: function(component, searchKey) {
var action = component.get("c.findByLastName");
action.setParams({
"searchKey": searchKey
});
action.setCallback(this, function(a){
component.set("v.leads", a.getReturnValue());
});
$A.enqueueAction(action);
}
})
ポイント
イベントの種類
インベントには「アプリケーションイベント」と「コンポーネントイベント」の2種類あります。(本ステップではコンポーネントイベントを利用しています。)
[コンポーネントイベント]
コンポーネント自体か、またはコンポーネントをインスタンス化するか、または入れ子となったコンポーネントによって処理を行います。
[アプリケーションイベント]
アプリケーション内にて、購読している全てのコンポーネント(上記の「コンポーネントイベント」では通知できないような関連性のないコンポーネント)に通知することができます。
コンポーネントイベント
<aura:event type="COMPONENT">と、type属性に「COMPONENT」を指定します。
コンポーネントイベント登録
<aura:registerEvent name="<イベント名>" type="<名前空間:イベント指定>"/>でコンポーネントイベントを登録できます。
名前空間c:は名前空間プレフィックスが設定されていない組織でのデフォルト名前空間です。
※値プロバイダのc.（固有のアクションおよびイベントハンドラを含むコンポーネントのコントローラ）と間違えないようにしてください。
コンポーネントイベント購読
<aura:handler name="<イベント名>" action="{!c.<イベントアクションメソッド名>}"/>でコンポーネントイベントを購読できます。
コンポーネントイベント発火
- コンポーネントの参照から
getEvent("<イベント名>")でイベント取得します。 -
setParamsでパラメータ設定します。 -
fireで発火します。
コンポーネントイベント属性値
event.getParam("searchKey")
イベントの属性にアクセスできます。
補足
- P111 コンポーネントイベント、それ自体のイベントを処理するコンポーネント
- P41 名前空間プレフィックスが設定されていない組織でのデフォルトの名前空間の使用
- P43 名前空間プレフィックスが設定されていない組織
- P72 値プロバイダ
