Event or Action bubbling in ember js

Question

Js bin snippet here, where bubbling is not working. http://emberjs.jsbin.com/sawane/3/edit

The ember documentation says,

http://emberjs.com/guides/views/handling-events/

Events bubble up from the target view to each parent view in succession, until the root view.

Event also bubbles through the controller and then route hierarchy.

I don't even see events being bubbled to route.

whats the question? what isnt bubbling? where does it start and where is it supposed to bubble to? — Craicerjack
@Craicerjack check the jsbin.. also Kim gave a partial answer.. — Ahmed Abbas
youre asking a question on stack overflow, the question and issue should really be on stackoverflow. Its great to provide a bin but not instead of a clear explanation of what you are asking. Even if I go to the bin I have to look through and try and figure out your code. Its unclear from your question whether you are trying to bubble from a view, component, or controller. — Craicerjack
@Craicerjack bruv.. there is only one action, the action on "+" button that needs to be bubbled up to controller heirarchy.. Not sure where is the confusion.. Hope this makes clear.. — Ahmed Abbas

Kim Røen Kim Røen · Accepted Answer · 2015-02-03T12:04:35

Ember.Components are different - they don't bubble actions automatically.

In your particular case, you will have to re-send the action first in your follow-action-component, then again in the user-item-component, and then in the user-list-component, like so:

// template
{{user-list action="follow"}}

// component
...
actions: {
  follow: function() {
    this.sendAction() // The default action is 'action'
  }
}
...

Here is a modified jsbin which logs all the way up: http://emberjs.jsbin.com/wobawa/1/edit

As an aside, this will be a bit easier with Ember 2.0, as it introduces some new concepts for actions in components. Check out the Ember 2.0 RFC for some more details on that.

Something you could do to avoid having to bubble it manually, is using the block syntax for your components to preserve the context, and then have the action in there:

// my-controller.hbs

// The 'follow' action will be triggered in this context (the controller)

{{#my-component}}
  {{#my-intermediate-component}}
    <button {{action 'follow'}}>Follow!</button>
  {{/my-intermediate-component}}
{{/my-component}}

Here is a jsbin showing this: http://emberjs.jsbin.com/juzuru/1/edit

Event or Action bubbling in ember js

1 Answers