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
merged 1 commit into from Aug 28, 2015

Conversation

Projects
None yet
3 participants
@balinterdi
Contributor

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

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

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

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

Merge pull request #670 from balinterdi/extend-action-helper-with-val…
…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

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@locks

This comment has been minimized.

Contributor

locks commented Aug 28, 2015

I'm convinced :P

@balinterdi

This comment has been minimized.

Contributor

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.