Sub-component action not bubbling up

I’ve spent half a day digging into this, and eventually found that you can have all actions bubble by aliasing target to targetObject in the outer component.

App.OuterComponent = Em.Component.extend
  target: Em.computed.alias("targetObject")

I can’t decide though if this is a clean way to opt-in to event bubbling, or if it comes too close to implementation details, i.e. might easily break with future updates. Thoughts?


(details of why this works)

A Component’s sendAction is a wrapper around TargetActionSupport’s triggerAction. This does

this.get("targetObject").send(actionName)`

When send (implemented in ActionHandler) gets the action, it will look in the actions hash, or bubble by doing

this.get("target").send(actionName)`

The result: only objects with a target will forward the event. Component’s don’t have a target, so they can’t let the event bubble up. Either they handle it, or it’s gone.

9 Likes