コンポーネントコントローラを使ってみよう
コンポーネントにクライアント側のコントローラを作ります。
(Apexのコントローラはサーバ側のコントローラとなります。)
画面イメージ
ソース
m03_ClientSideController.cmp
<aura:component implements="force:appHostable">
<aura:attribute name="switch" type="Boolean" default="false" />
<h1>ボタンクリックでON/OFF</h1>
<aura:If isTrue="{!v.switch}">
<p>ON</p>
<aura:set attribute="else">
<p>OFF</p>
</aura:set>
</aura:If>
<ui:button label="{!v.switch ? 'OFFにする' : 'ONにする' }" press="{!c.toggle}"/>
</aura:component>
コンポーネントコントローラは開発コンソール内の右サイドバーで[CONTROLLER]をクリックしてファイルを作成します。
m03_ClientSideControllerController.js
({
toggle: function(component, event, helper) {
var status = component.get("v.switch");
component.set("v.switch", !status);
}
})
ポイント
引数
component, event, helper
コンポーネント
コンポーネントは以下のリソースをバンドルします。
- コンポーネント または アプリケーション
- コントローラ
- ヘルパー
- CSS
- レンダラ
- 設計
- ドキュメント
- SVGファイル
コンポーネントの属性へのアクセス
コントローラからコンポーネントの属性にアクセスするにはコンポーネントの参照から"v.<属性名>"で取得します。
式
アプリケーションやコンポーネント（.app/.cmp）では{!}構文を使用します。
コントローラやヘルパーといったJavaScript（.js）では文字列""を使用します。
条件式
<aura:If>- 三項演算子
補足
- P71 条件式
- P46 コンポーネントのバンドル
- P72 値プロバイダ
- P216 aura:if
