読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Counterアプリで学ぶLightning Component開発

ちょっと前にReactの勉強でこういう感じのコンポーネントをつくってみました。


Reactはコンポーネントベースで開発していきます。Ligtning Componentもコンポーネントベースで開発していきます。...ということでLightning Componentバージョンも試してみました。


以下のコンポーネントで構成されています。

  • CounterBox : CounterItemをまとめたもの
  • CounterItem : CounterItemValueとCounterItemMenuをまとめたもの
  • CounterItemValue : 値の表示
  • CounterItemMenu : Up / Downの処理を実行

f:id:tyoshikawa1106:20160527111426p:plain


Lightning Componentの開発でコンポーネント同士の連携をする場合はLightning Eventをつかって対応する必要がありますが、今回のように親子でつながっているようなときは、aura:attributeのtype="Aura.Action"のcontroller.jsの処理を渡すことで連携できます。


受け取り側 (CounterItemMenuコンポーネント)

<aura:attribute name="countup" type="Aura.Action" />
<aura:attribute name="countdown" type="Aura.Action" />


値渡し側 (CounterItemコンポーネント)

<c:CounterItemMenu countup="{!c.countup}" countdown="{!c.countdown}" />


これで、CounterItemMenuコンポーネントから、親のCounterItemコンポーネントの処理を呼び出して、結果をCounterItemValueコンポーネントに反映させることができます。


サンプルコードです。