Deep Dive on Ember Events

The difference between Ember actions and DOM events and why it matters, plus a really rad flowchart.

Heads up, we’ve moved! If you’d like to continue keeping up with the latest technical content from Square please visit us at our new home https://developer.squareup.com/blog

<div class="cool-new-button" {{action "toggleTheThing"}}>  {{#if shouldShowThisTooltip}}
<div class="tour-tooltip">
This button can open and close The Thing!

<a {{action "toggleTheThingAndAdvanceToNextStep" bubbles=false}}>
Next Step of the Tour
</a>
</div>
{{/if}}
</div>
<div class="cool-new-button" onClick={{action "toggleTheThing"}}>  {{#if shouldShowThisTooltip}}
<div class="tour-tooltip">
This button can open and close The Thing!

<a {{action "toggleTheThingAndAdvanceToNextStep" bubbles=false}}>
Next Step of the Tour
</a>
</div>
{{/if}}
</div>
Image for post
Image for post
Gif of Kandi Burruss speaking with caption “So I’m just confused” (source)
Image for post
Image for post
Gif of Taraji P. Henson writing math equations on a chalkboard in Hidden Figures movie (source)

Interactive Demo: Events in Ember

Image for post
Image for post
Screenshot of Ember Twiddle Demo. Link to interactive demo.

The Basics

<div id="parent">                  <!-- This is a node. -->
<button id="child"></button> <!-- This is also a node. -->
</div>

Order of Events in Ember

Image for post
Image for post
Flowchart titled: “How do events and actions work in Ember?” Link to plaintext outline of chart .

Types of Event Listeners in Ember

{{some-component click=(action “handleClick”)}}
<div {{action "handleClick"}}></div>
<div {{action "handleDoubleClick" on="doubleClick"}}></div>
<div onclick={{action "handleClick"}}></div>
Image for post
Image for post
Screenshot of click Component Attribute in Ember Twiddle demo.

1. Component Event Attributes

Code examples for click Attribute actions. Link to examples in GitHub Gist.
Image for post
Image for post
Screenshot of Element Modifier in Ember Twiddle demo.

2. Element Modifiers

Code examples for Element Modifier actions. Link to examples in GitHub Gist.
Image for post
Image for post
Screenshot of onClick HTML Attribute in Ember Twiddle demo.

3. DOM Event Attributes

Code examples for onClick Attribute actions. Link to examples in GitHub Gist.

Learnings and Recommendations

Image for post
Image for post
Gif of Robby Novak (aka Kid President) holding eyes open (source)
<div class="cool-new-button" onClick={{action "toggleTheThing"}}>{{#if shouldShowThisTooltip}}
<div class="tour-tooltip">
This button can open and close The Thing!

<a {{action "toggleTheThingAndAdvanceToNextStep" bubbles=false}}>
Next Step of the Tour
</a>
</div>
{{/if}}
</div>

Takeaways

Image for post
Image for post
Gif of fish from Finding Nemo with caption “Now what?” (source)
<div {{if shouldRespondToClick (action "handleClick")}}></div>
<div onClick={{if shouldRespondToClick (action "handleClick")}}</div>
Image for post
Image for post
Gif of Michelle Obama and Missy Elliott dancing in a car (source)

Square Corner Blog

Buying and selling sound like simple things - and they…

Marie Chatfield Rivas

Written by

writes code and poetry. always looking for new things to learn. my.pronoun.is/she/her

Square Corner Blog

Buying and selling sound like simple things - and they should be. Somewhere along the way, they got complicated. At Square, we're working hard to make commerce easy for everyone.

Marie Chatfield Rivas

Written by

writes code and poetry. always looking for new things to learn. my.pronoun.is/she/her

Square Corner Blog

Buying and selling sound like simple things - and they should be. Somewhere along the way, they got complicated. At Square, we're working hard to make commerce easy for everyone.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store