# Understanding actions in components after 1.13

**URL:** <https://discuss.emberjs.com/t/understanding-actions-in-components-after-1-13/8273>\
**Category:** Design\
**Created:** [June 25, 2015, 11:27pm UTC](https://discuss.emberjs.com/t/understanding-actions-in-components-after-1-13/8273 "2015-06-25T23:27:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jorge\_lainfiesta](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jorge_lainfiesta/32/11024_2.png) [@jorge\_lainfiesta](https://discuss.emberjs.com/u/jorge_lainfiesta)\
**Post date:** [June 25, 2015, 11:27pm UTC](https://discuss.emberjs.com/t/understanding-actions-in-components-after-1-13/8273/1 "2015-06-25T23:27:40Z")

</div>

Hi, I’d like to have some help understanding how I should handle one-way binding in components after 1.13.

For example, if I have a simple `each` in a template:

```auto
{{#each model as |item|}}
    {{editable-item item=item submit=(action 'saveItem')}}
{{/each}}

```

The component template has all display stuff but also allows users to edit item’s content and save the changes on the item pressing a button.

_editable-item.hbs_

```auto
{{item.title}}
{{input value=item.title enter='edit'}}
{{input value=item.foo enter='edit}}
{{input value=item.bar enter='edit}}

```

_editable-item.js_

```auto
import Ember from "ember";

export default Ember.Component.extend({
  actions: {
    edit() {
      this.attrs.submit(this.get('item'));
    }
  }
});

```

Should I send the `item` as parameter and then re-find it from the `store` on the route and finally `save` it to the server. Or should I send the `submit` function a parameter per each item field? Or is this all wrong? I’d like to know what’s the Ember way to handle actions now.

Thanks!

---

<div class="post-metadata">

**Author:** ![tarasm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tarasm/32/15980_2.png) [@tarasm](https://discuss.emberjs.com/u/tarasm)\
**Post date:** [June 26, 2015, 4:48pm UTC](https://discuss.emberjs.com/t/understanding-actions-in-components-after-1-13/8273/2 "2015-06-26T16:48:55Z")

</div>

You might want to take a look at the [Improved Actions RFC](https://github.com/emberjs/rfcs/blob/master/text/0050-improved-actions.md) that describes how the closure actions are designed to work.

---

<div class="post-metadata">

**Author:** ![balint](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/balint/32/12521_2.png) [@balint](https://discuss.emberjs.com/u/balint)\
**Post date:** [July 2, 2015, 11:44am UTC](https://discuss.emberjs.com/t/understanding-actions-in-components-after-1-13/8273/3 "2015-07-02T11:44:52Z")

</div>

That looks all good except I’m not sure that the `edit` action in the component will be fired automatically as it is, to my knowledge, not a UI event.

Other than that, the way it is set up now, the `saveItem` action handler in your controller will receive the item that was edited/clicked/whatever and can then save it:

```nohighlight
actions: {
  saveItem(item) {
    return item.save();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Bob\_Myers](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@Bob\_Myers](https://discuss.emberjs.com/u/Bob_Myers)\
**Post date:** [July 20, 2015, 6:00pm UTC](https://discuss.emberjs.com/t/understanding-actions-in-components-after-1-13/8273/4 "2015-07-20T18:00:48Z")

</div>

Curious why these are called “closure actions”. What is the closure, what is being closed over?

The RFC says

> closed over functions

I have no idea what this means.

---

<div class="post-metadata">

**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\
**Post date:** [July 21, 2015, 5:59pm UTC](https://discuss.emberjs.com/t/understanding-actions-in-components-after-1-13/8273/5 "2015-07-21T17:59:41Z")

</div>

They are closed over the variables in their (template) scope 🙂 including the scope.

```auto
// app/templates/application.hbs
{{! scope here is controller, the action helper creates a closure that binds the scope as oppose to...}}
{{#my-component do-things=(action "action")}}
{{/my-component}}

// app/templates/components/my-component.hbs
{{! the scope here is the component, the resulting closure binds the component as the action handler's "this" }}
{{yield (action "action")}} 

```