ember-component-inbound-actions icon indicating copy to clipboard operation
ember-component-inbound-actions copied to clipboard

Getting the return value of the action

Open YoranBrondsema opened this issue 7 years ago • 2 comments

I'm in a situation where I need to get the return value of a call to an action (in my case a Promise). Basically I'd like to call the action similar as how you'd call a closure action.

Now I have to resort to something hacky like:

const childComponent = this.get('childComponent').target;      
return childComponent.actions.someAction.call(childComponent);

whereas ideally I'd do something like

return this.get('childComponent.someAction')();

Is this something that you've thought about extending the addon with? I know that Ember.ActionHandler only exposes the send function. I'm not too familiar with the part of Ember.js that implements closure actions but maybe there's a way we could easily mix in that functionality similar to Ember.ActionHandler. Just wanted to get your opinion before I dive into this further :-).

YoranBrondsema avatar Apr 06 '17 18:04 YoranBrondsema

It sounds like you could use contextual components and closure actions. Is there any reason why you couldn't? I'm interested as I suspect that this addon might not have any use cases that aren't covered by core Ember primitives

GavinJoyce avatar Apr 06 '17 19:04 GavinJoyce

Maybe my use case will make it clearer. I want to delay the destroy of a component, for animation purposes. Ideally Ember would have a sort of an async willDestroyElement, similar to how the model hook in a route is blocking. Reality is different :-).

So I'm using ember-component-inbound-actions to send an action willClose to the child component, which returns a Promise. The parent component then waits until this Promise resolves to effectively destroy the child component.

Something like this:

component:parent-component

// components/parent-component/template.hbs
{{#if showChildComponent}}
  {{child-component actionReceiver=childComponent}}
{{/if}}
// components/parent-component/component.js
...
hideChildComponent() {
  const childComponent = this.get('childComponent').target;      
  childComponent.actions.willClose.call(childComponent).then(() => {
    this.set('showChildComponent', false);
  });
}
...

component:child-component

// components/child-component/component.js
...
actions: {
  willClose() {
    return this.someAsyncStuffThatReturnsAPromise();
  }
}
...

It's hacky I agree but it's the easiest solution I could come up with.

So now the addon allows us to perform a send on an action receiver. However, it doesn't give us the return value of the action. I hope this makes it a bit clearer?

YoranBrondsema avatar Apr 06 '17 19:04 YoranBrondsema