Sending action to child component in a component block Ember 1.13

Learning Team
1

On Ember 1.13, I’m converting Views into Components. I have a form component thats template looks like the following:

InputFormComponent:

<form {{action "submit" on="submit"}}>
    {{yield this}}
    <input type="submit">
</form>

I use it for edit and new components. They look like:

{{#input-form model=model as |f|}}
    {{post-edit model=model}}
{{/input-form}}

Now in my PostEdit component, I want to override the submit action, but that action is not propagating to the child component. It will always go to the submit action in the InputFormComponent.

Is there any way to somehow pass the event down via the template? The InputFormComponent is used in multiple places, but only in a few places do I have to override the submit action.

2

This may be a bigger change. The problem is that the {{input-form}} component shouldn’t be handling the action without re-emitting it. When the component re-emits the action, it’ll get bubbled through the routes and get handled along the way. Your controller can choose to intercept the action and “override” the behavior.

3

Take a look at:

4

So the problem here is that for some reason my controllers aren’t getting linked with components. I followed broerse’s advice from another question ( Loading Components when routing Ember 1.13 ) about using the view templates to call components which works really well. However, now any actions that a component’s layout uses don’t make it to the controller anyways. So I have to define actions within the component.

I guess I’ll have to dig around and maybe change the approach I have.

5

Yes you have to bubble yourself in components like this.

Or switch to closure-actions