# Triggering component actions from controller

**URL:** <https://discuss.emberjs.com/t/triggering-component-actions-from-controller/6899>\
**Category:** Uncategorized\
**Created:** [December 11, 2014, 2:57pm UTC](https://discuss.emberjs.com/t/triggering-component-actions-from-controller/6899 "2014-12-11T14:57:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mpedrera](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mpedrera/32/15697_2.png) [@mpedrera](https://discuss.emberjs.com/u/mpedrera)\
**Post date:** [December 11, 2014, 2:57pm UTC](https://discuss.emberjs.com/t/triggering-component-actions-from-controller/6899/1 "2014-12-11T14:57:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![LevelbossMike](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/levelbossmike/32/14610_2.png) [@LevelbossMike](https://discuss.emberjs.com/u/LevelbossMike)\
**Post date:** [December 11, 2014, 8:17pm UTC](https://discuss.emberjs.com/t/triggering-component-actions-from-controller/6899/2 "2014-12-11T20:17:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mpedrera](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mpedrera/32/15697_2.png) [@mpedrera](https://discuss.emberjs.com/u/mpedrera)\
**Post date:** [December 12, 2014, 7:32am UTC](https://discuss.emberjs.com/t/triggering-component-actions-from-controller/6899/3 "2014-12-12T07:32:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![LevelbossMike](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/levelbossmike/32/14610_2.png) [@LevelbossMike](https://discuss.emberjs.com/u/LevelbossMike)\
**Post date:** [December 12, 2014, 9:09am UTC](https://discuss.emberjs.com/t/triggering-component-actions-from-controller/6899/4 "2014-12-12T09:09:14Z")

</div>

> **[JS Bin](http://emberjs.jsbin.com/ledatezeze/4/edit)**
>
> A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

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](https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice) for more information about data flow in ember 2.0.