CODEWITHSUNDEEP
javascriptember.jsember-components
Chris
Chris

Reputation: 3657

Ember.js (v2.4.5) component isn't passing up second action

I've got a very simple component which has two actions, start and stop. These are fired when clicking buttons. The first action is bubbled up to the route and works as expected, however the second action is fired in the component, but never makes it to the route.

I have just started playing around with Ember, but I assume components can preform more than one action?

There are no errors in the console, the button just doesn't do anything and the console log from the route is never displayed.

Component actions

actions: {

  start() {
    console.log('component start called');
    this.sendAction('start', this.get('item'));
  },

  stop() {
    console.log('component stop called');
    this.sendAction('stop', this.get('item'));
  }
}

Route actions

actions: {
    start (server) {
        console.log('route start called');
        server.set("settings.amazonTask", 'start');
        server.save();
    },

    stop (server) {
        console.log('route stop called');
        server.set('settings.amazonTask', 'stop');
        server.save();
    }
}

Template

<button type="button"
        class="btn btn-default btn-sm" {{action "start"}}>
    Turn on
</button>


<button type="button"
        class="btn btn-default btn-sm" {{action "stop"}}>
    Turn off
</button>

Upvotes: 0

Views: 32

Answers (1)

Lux
Lux

Reputation: 18240

You have to give the actions down to your component:

{{my-component start=(action 'start') stop=(action 'stop')}}

And then you can call then with sendAction.

But I highly recommend to use the new syntax and directly access the actions on the attrs object. This is much clearer and makes clear whats happening:

this.attrs['start'](this.get('item'))

Actually the action helper just gets an action from the actions object and bounds it to the current context. The result of that can be given down to the component and then be called from there, in the context where you executed the action helper.

Note that calling the action helper on an already created action will not rebound the action but just pass it though.

Upvotes: 1

Related Questions