Add section about the value
option of the action helper
#670
Add section about the value
option of the action helper
#670
Conversation
|
||
```handlebars | ||
<label>What's your favorite band?</label> | ||
<input type="text" value={{favoriteBand}} onblur={{action "bandDidChange"}}/> |
There was a problem hiding this comment.
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}}
?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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).
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
…ue-option Add section about the `value` option of the action helper
I'm convinced :P |
Thank you for merging, Ricardo. |
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.