How does yield behave when we pass it an action in Ember?

Question

I have the following code:

Component template

{{#link-to "user.profile" account.id disabled=user.online}}
    {{yield}}
{{/link-to}}

Template

{{#my-component data=x}}
    <button> MY BUTTON </button>
{{/my-component}}

I use the component in different templates and I'd like the yielded elements to have an action. I've read you can use it like this but I can't really grasp the behaviour.

{{#link-to "user.profile" account.id disabled=user.online}}
    {{yield (action "showModal")}}
{{/link-to}}

Can anyone shed some light on this subject?

Answer 1

Here its usage:

{{#my-component as |act|}}
    <button onclick={{action act}}>Button</button>
{{/my-component}}

Here is working twiddle.

To understand more: here is a good blog post. This is a one of the three posts of the writer about contextual components.