Yielded closure actions as an API for a Component

From within x-parent component that has an action update that (for example) returns a promise:

{{ yield (action 'update') }}

You can then tap into that update action from within the block section like so:

{{ x-parent as |parentUpdateAction| }}
  {{ x-child update=parentUpdateAction }}
{{/ x-parent }}

Then from within the click handler on x-child you could utilize the promise returned from the closure action:

click() {
  this.attrs.update().then(function(){
    // do something like transition away
  }).catch(function(){
    // update ui to handle error case
  });
}

Yielding closure actions like this is powerful. Being able to utilize the return value from a closure action is great for ensuring that the right section of your application is responsible for the things that it cares about.

I've recently talked about this on Ember Weekend.

Specifically I think that you can utilize this feature to create Ember components that yield their API. Treating these yielded actions as the component's API can allow you to create template DSL's that are really something special.

Cheers, Jonathan

Tweet