Emberjs components actions

Question

I am trying to use Emberjs components. And I stumbled into trouble with actions.

Here my component:

export default Ember.Component.extend({

    actions: {
        openObject: function (id) {
            this.sendAction('openObject', id);
        }
    },
...

And here my controller, also I have created the same action in the route.

export default Ember.Controller.extend(
    {
        actions: {
            openObject: function (id) {
                    self.transitionToRoute('objects.bc', id);
            }
        }
    }
);

And what I need is just to make transition by action from component.

And it is work only if I connect controller action and component action this way:

{{bc-table openObject="openObject"}}

Is there some way to send action from component to router/controller without such connection?

"targetObject" is a property that points to the parent view's controller, and you can do send on that object but from what i've heard, its not a good approach because it kinda kills the concept of component should be self contained ideology - what if some other place of the code needs to use same component but "openObject" should do something else? Kills the flexibility. emberjs.com/api/classes/… — Deewendra Shrestha
You should rely on action bubbling. I will post an example in a bit (eating lunch now) — Christopher Milne

Christopher Milne Christopher Milne · Accepted Answer · 2015-05-26T20:22:32

Your component.js file should be something like:

export default Ember.Component.extend({
  pickedObject: 'openObjectHandler',
  actions: {
    openObject: function (data) {
      this.sendAction('pickedObject', data);
    }
  },
...

When the openObject action is fired, the component will bubble the action upward as 'openObjectHandler', passing in data. So your controller needs to implement an action handler called 'openObjectHandler'.

An alternate way to express this is to pass in the argument to the web component when you use it in your template like this (will take precedence over pickedObject in component.js):

{{my-example pickedObject='otherOpenObjectHandler}}

Handle the action like this in a controller active in the current route hierarchy, say your Application Controller, for example:

actions: {
  openObjectHandler: function(data) {
    // do something here
    console.log('openObjectHandler: '+data);
  }
}

Here's a JSBin of something I'm working on that uses this technique to bubble an action up to a controller:
JSBin Demo

Emberjs components actions

1 Answers