Pass controller action to a component in EmberJS returns undefined

Question

I have a controller in EmberJS with an action, inside the route template I'm calling a component, and passing the controller's action to the component as a parameter. Just like documentation says in EmberJS 2.20 Triggering changes with actions
When I'm trying to call the "parent" action inside the component, the return is undefined, but if I throw on console, "this" element and inspect its attr, the function is there.
Controller js code:

export default Ember.Controller.extend({
  firstName:'',
  lastName:'',
  actions: {
    addAlumn (){
      this.store.createRecord('alumn',{
        firstName : this.get('firstName'),
        lastName : this.get('lastName')
      });
    }
  }
});

Route hbs template:

{{#validated-form submit=(action 'addAlumn') saveBtn=true }} ... {{/validated-form}}

Validated-form hbs template

{{yield}}
{{#if saveBtn}}
<a href="#" class="btn primary save"{{action "validateAndSubmit"}}>Add <span class="icon-check"></span></a>
{{/if}}

Validate-form js code

export default Ember.Component.extend({
  actions : {
    validateAndSubmit(){
      console.log('validate');
      console.log(this);
      console.log(this.get('submit')());
    }
  }
});

As I said, the results on console are:

> validate
> Class {__ember1449505261281: "ember496", __ember_meta__: Meta, parentView: Class, HAS_BLOCK [id=__ember1449505261281400801945202]: true, _targetObject: Class…}
> undefined

Any clues on why this is not triggering the event? Maybe is because the guide example is working just with components and I'm using a controller?

Daniel Kmak Daniel Kmak · Accepted Answer · 2015-12-07T16:51:49

Just use componentInstance.sendAction please:

validateAndSubmit() {
  console.log('validate');
  this.sendAction('submit');
}

Working demo.

Pass controller action to a component in EmberJS returns undefined

1 Answers