CODEWITHSUNDEEP
javascriptember.jscomponents
Costa
Costa

Reputation: 654

Emberjs components actions

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?

Upvotes: 1

Views: 111

Answers (1)

Christopher Milne
Christopher Milne

Reputation: 938

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

Upvotes: 2

Related Questions