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:
- any native DOM click listeners on the
buttonchild will be called (none in this example) - any native DOM click listeners on the
divparent will be called (none in this example) - any Ember action listeners on the
buttonchild will be called (an action calledlog, with parameters"Hello from child") - any Ember action listeners on the
divparent will be called (an action calledlog, 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.
