Ember component action not bubbling up to template router

Question

I have a component that should bubble an action up to its template router.

I pass the name of the action to the component:

{{project-table projects=model viewProject="viewProject"}}

Inside my component (project-table), I have:

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        viewProject: function (project) {
            this.sendAction('viewProject', project);
        }
    }
});

Inside the component template, I have:

<button type="button" {{action "viewProject" project}}>
    My Button
</button>

Last but not least, I have my router:

actions: {
     viewProject: function (project) {
         this.transitionToRoute('project', project);
     }
}

The component's action gets invoked correctly. However from there on, the action does not bubble up. Any ideas as to what I might be going wrong?

not sure if this is a typo, but your project-table controller is extending Ember.Component, so it's not a controller. — Peter Brown, Apr 08 '16 at 01:47

score 2 · Accepted Answer · answered Apr 08 '16 at 12:59

2

@JB2, your code is almost perfect, and I'm sure that the action is bubble up to the Route level.

However, please note, that Route has transitionTo method only. http://emberjs.com/api/classes/Ember.Route.html#method_transitionTo

In a Controller, you can use transitionToRoute method. http://emberjs.com/api/classes/Ember.Controller.html#method_transitionToRoute

It is easy to mix. :) I check the API doc also quite often, which one could I use and where. :)

answered Apr 08 '16 at 12:59

Zoltan

4,936
1
35
40

1

Thank you Zoltan. Yes, that was it! :-) Uff, the amount of time I spent on this haha. Thank you!! – JB2 Apr 10 '16 at 22:22

Ember component action not bubbling up to template router

1 Answers1