Triggering component actions from controller

1

Having the following scenario for a checkout page:

CheckoutController
  └── checkout.hbs
     ├── <button> // Call to action button, needs to trigger form
     └── FormGeneratorComponent
         └── FormObjectComponent
             └── form-object.hbs
                 └── <form>

How can the CheckoutController submit the form inside the components? In other words, call to action button is hooked to an action in CheckoutController that needs to submit the form contained at the deepest level.

Submitting the form from within the components theirselves is not an option, since the CTA button belongs to the global layout, it’s not in any of the components template.

2

You should be able to create a binding between a property of the CheckoutController and the FormObject (created by the FormGeneratorComponent?!). When pressing the cta-button you would then send the formObject in an action that gets triggered by the cta-button.

3

How would that look like with code?

I mean, I know a reference to the controller can be passed to the component when instantiating {{form-generator delegateTo=this}} but again this would end in component calling controller’s actions, and it needs to be the other way around.

4

This works because of the way two-way bindings work in Ember right now. But I guess this is supposed to be changed in Ember 2.0. As far as I know you will be able to opt-in into this behaviour in 2.x but maybe you should have a look if this is a useful layout for what you want to do (depends on your application of course).

Imho this creates hard to debug code because if you build your application in this way all nested components will be able to change controller properties all over the place. data-flow should work in a “Bindings down <-> Actions up” way which is much more easy to reason about.

You can have a look at Ember 2.0 in Practice - Speaker Deck for more information about data flow in ember 2.0.