Component-through action bubbling?

1

I have several nested components. To generate actions I use Ember.TargetActionSupport. This works fine, but it sends action only to parent (in my case — from child component to parent component) and it is not bubbling up to controller.

Is there a way to make it bubble, or any other way to send action from nested component up to controller?

The way I’ve tried is to catch event in parent controller and re-send it up. It works fine, but in this case I need an “all-catch handler”, to simply proxy up all actions (parent controller isn’t aware of child’s actions) — can this be done?

2

I run into this quite often and it would be great if sendAction in a component bubbled up through the component chain to the original template as opposed to being discarded.

For example, in our app I’ve got a user-card component which when clicked shows a pop-over card with options like view profile and send message. This component is used in many other components and that means that almost all of my components now need to know to handle the viewProfile action and bubble it up so that it ends up in the router to transition to the right place.

I think this might not be too difficult to implement, in a component’s sendAction it could check its target and if it’s also a Component it could call sendAction on that if no action is specified. This would then go up the stack until it hits the controller and then the current behaviour (swallow if no target action given) would remain.

3

I’ve dig into ember source and found answer. This may be useful.

Component inherits from View. In fact, it is a simple View that acts as a controller for itself. https://github.com/emberjs/ember.js/blob/v1.5.0/packages/ember-views/lib/views/component.js#L102

Ember.Component = Ember.View.extend(Ember.TargetActionSupport, Ember.ComponentTemplateDeprecation, {
  init: function() {
    this._super();
    set(this, 'context', this);
    set(this, 'controller', this);
  },

set(this, 'controller', this) makes Component isolated. So to take advantage of Components binds and isolated self-control but to keep it transparent for actions, you should use Views with self-context:

App.MyTransparentComponent = Ember.View.extend
    init: ->
        @_super()
        @set('context', @)

In fact, you can make a Mixin with all code of Component, but with this init code and be happy with this cool stuf :slight_smile: