Marie Chatfield
Aug 9, 2017 · 1 min read

Thanks for reading! As you’ve noticed, the flowchart does outline how actions in Ember are called, and they do bubble through the DOM in much the same way as regular DOM events.

That is to say, given a template:

<div {{action "log" "Hello from parent"}}>
<button {{action "log" "Hello from child"}}>
Click me!
</button>
</div>

The following will happen:

  1. any native DOM click listeners on the button child will be called (none in this example)
  2. any native DOM click listeners on the div parent will be called (none in this example)
  3. any Ember action listeners on the button child will be called (an action called log, with parameters "Hello from child")
  4. any Ember action listeners on the div parent will be called (an action called log, with parameters "Hello from parent")

That’s the event propagation described in the flowchart. The piece I didn’t discuss in this article is how the action helper actually identifies what "log" means in each context — which function on what component, controller, or route should be called.

That process is exactly as you’ve described, or in the words of the Ember.Templates.helpers.action documentation:

If the context of a template is a controller, actions used this way will bubble to routes when the controller does not implement the specified action. Once an action hits a route, it will bubble through the route hierarchy.

    Marie Chatfield

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

    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