Pass action from input and set checked from parent component

1

I need to use an ember checkbox input to send an action to a parent controller. The child controller is nested in the parent and the action is sent from the child controller. The problem I’m having is with the input checked parameter. I suspect there’s a conflict between the names in the child and parent and native input checkbox helper. Hitting a wall after several hours of trying to trouble shoot so reaching out for a bit of help. See the twiddle here:

2

Please refer Triggering Changes with Actions - Components - Ember Guides for details on bubbling up actions to parent component.

If you want to invoke an action defined in the route, you may want to use GitHub - DockYard/ember-route-action-helper: Bubble closure actions in routes

3

The problem isn’t to do with bubbling - it’s to do with the input checked parameter in the child component overriding the data down from the parent component.

4

This structure seems odd to me and I do not ask why you are doing it this way. To make the parameter ‘autoRefresh’ known to the child component you have to yield it in the parent component. Otherwise ‘autoRefresh’ is taken from the application controller where it is undefined.

application.hbs:

{{#parent-component as |autoRefresh|}}
  {{child-component autoRefresh=autoRefresh}}
{{/parent-component}}

parent-component.hbs:

{{yield autoRefresh}}