Skip to content
This repository has been archived by the owner on May 26, 2019. It is now read-only.

Add section about the value option of the action helper #670

Merged

Conversation

balinterdi
Copy link
Contributor

I took a stab of explaining what the value option of the action helper is and what it is good for. Let me know if any corrections need to be made.


```handlebars
<label>What's your favorite band?</label>
<input type="text" value={{favoriteBand}} onblur={{action "bandDidChange"}}/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you sure you're supposed to do value={{favoriteBand}}?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not totally, but I think it enables various things as the input value and the property (favoriteBand) are no longer two-way bound and thus you could do some filtering/transformation before you "write back" the value. This is silly but hopefully demonstrates my point:

<input type="text" value={{rating}} onblur={{action "incRating" value="target.value"}}
  actions: {
    incRating(value) {
      const newValue = window.parseInt(value) + 1;
      this.set('rating', newValue);
    }
  }

When you focus out of the text field, the number you inputted will be incremented by one.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean they're no longer two-way bound? I think I'm missing something here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is <input> with attribute bindings NOT {{input}}. Attribute bindings are one way ({{input}} gets around this by using the change event and updating the internal value).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you type something in the input box, rating does not get updated right away to the inputted value, only when you the input loses focus (in other words, when the action is fired). It is somewhat hard to get one's head around but maybe because we're too used to two-way bindings.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rwjblue So is the code example I gave demonstrative enough? I originally used oninput, not onblur but I guess both could work.

locks added a commit that referenced this pull request Aug 28, 2015
…ue-option

Add section about the `value` option of the action helper
@locks locks merged commit 279db6a into emberjs:master Aug 28, 2015
@locks
Copy link
Contributor

locks commented Aug 28, 2015

I'm convinced :P

@balinterdi
Copy link
Contributor Author

Thank you for merging, Ricardo.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants