ヘルパーを使ってみよう
コンポーネントにヘルパーを作り再利用する関数をまとめます。
画面イメージ
ソース
Apex
モジュール7のApexクラス(LeadController.cls)を利用します。
コンポーネント
モジュール6のソース(m06_CallApex)をリファクタリングします。
m08_Helper.cmp
<aura:component controller="LeadController" implements="force:appHostable">
<aura:attribute name="leads" type="Lead[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<h3>リード表示</h3>
<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>
m08_HelperController.js
({
doInit: function(component, event, helper) {
helper.getLeads(component);
},
refresh: function(component, event, helper) {
helper.getLeads(component);
},
})
ヘルパーは開発コンソール内の右サイドバーで[HELPER]をクリックしてファイルを作成します。
m08_HelperHelper.js
({
getLeads: function(component) {
var action = component.get("c.findAll");
action.setCallback(this, function(a){
component.set("v.leads", a.getReturnValue());
});
$A.enqueueAction(action);
}
})
ポイント
特になし。
補足
- P159 コンポーネントのバンドル内のJavaScriptコードの共有
