Skip to content
This repository has been archived by the owner. It is now read-only.

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

Merged

Conversation

@balinterdi
Copy link
Contributor

@balinterdi balinterdi commented Aug 28, 2015

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"}}/>

This comment has been minimized.

@locks

locks Aug 28, 2015
Contributor

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

This comment has been minimized.

@balinterdi

balinterdi Aug 28, 2015
Author Contributor

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.

This comment has been minimized.

@locks

locks Aug 28, 2015
Contributor

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

This comment has been minimized.

@rwjblue

rwjblue Aug 28, 2015
Member

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).

This comment has been minimized.

@balinterdi

balinterdi Aug 28, 2015
Author Contributor

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.

This comment has been minimized.

@balinterdi

balinterdi Aug 28, 2015
Author Contributor

@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
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@locks
Copy link
Contributor

@locks locks commented Aug 28, 2015

I'm convinced :P

@balinterdi
Copy link
Contributor Author

@balinterdi balinterdi commented Aug 29, 2015

Thank you for merging, Ricardo.

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

Successfully merging this pull request may close these issues.

None yet

3 participants