Emberjs 1.13.0—Call Action of Component

Question

I have such a Component:

App.MyNiceComponent = Ember.component.extend({
  actions: {
    save: function () { … }
  }
});

The template for it:

<h1>My Nice Component</h1>
{{ yield this }}

Anywhere in another template:

{{#my-nice as |mn| }}
  …
  <a onclick={{ action 'save' }}>Save</save>
{{/my-nice}}

Clicking on the Link make Ember try to trigger the Action in the routes controller. I guess that is because the version we are using here is so old, but is there any way to make ember call the components Action, or to just hand over a function reference to the link, so that this is called?

In another component, which is designed to have certain child components, I could manage to do it like so:

App.AChildComponent = Ember.Component.extend({
  targetObject: Em.computed.alias('parentView'),
  task: '',
  action: 'onChildClick', //present as Action in the parent Compoent

  click: function(){
    this.sendAction('action', this.get('task'));
  }
})

In hbs this would look like that:

{{#my-nice}}
  {{#a-child task="do this"}}
{{/my-nice}}

In this case I really would love to make ember trigger the compoents actions, without the way over the controller…

Thanks in advance.

maheshiv maheshiv · Accepted Answer · 2016-11-19T18:15:21

@philipp, you can use action helper to pass the action from component to anywhere(pass action "actionName" as another parameter in yield). For eg:- In your case <h1>My Nice Component</h1> {{yield (action "save")}}

{{#my-nice as |saveAction| }}
 …
 <a onclick={{ action saveAction }}>Save</save>
{{/my-nice}}

Emberjs 1.13.0—Call Action of Component

1 Answers