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