vendredi 11 mars 2016

Bubbling up actions of block component

I'm trying to set up nested component in EmberJS 2.4, that would communicate between each layer.

Here is how I call my first "component":

{{#form-control as |error updateMessage|}}
  <label class="form__label">This is a label</label>
  {{input type='text' class='form__input' required='required' errorMessageChanged=updateMessage}}
  {{#if error}}<p>{{error}}</p>{{/if}}
{{/form-control}}

The template is defined as is:

{{yield errorMessage (action 'updateErrorMessage')}}

While it's a bit verbose, it works. Whenever my "input" component emits the "errorMessageChanged", the updateErrorMessage action of the form control is executed as well.

Now, I want to introduce a new layer: this form control would be wrapped by another component:

{{#validatable-form}}
  {{#form-control as |error updateMessage|}}
    <label class="form__label">This is a label</label>
    {{input type='text' class='form__input' required='required' errorMessageChanged=updateMessage}}
    {{#if error}}<p>{{error}}</p>{{/if}}
  {{/form-control}}
{{/validatable-form}}

I've also defined the "updateErrorMessage" as an action of the validatable-form component. However, this one is not called.

I've tried to return true from the "form-control" action in order to enable bubbling:

actions: {
  updateErrorMessage(inputId, errorMessage) {
    this.set('errorMessage', errorMessage);
    return true; // Allow parent component (especially "validatable-form" component) to catch the action as well)
  }
}

But it's simply not transmitted to the parent layer. What should I do?

Aucun commentaire:

Enregistrer un commentaire