This is typically useful with form elements such as ,
When the user edits the value in the associated form control, it updates the value on your view model.
Multiple option selection with elements
Any previous value will be overwritten. If this parameter is an observable value, the binding will update the element’s value whenever the value changes.
If the parameter isn’t observable, it will only set the element’s value once and will not update it again later.
Bind across more than two components
If you supply something other than a number or a string (e.g., you pass an object or an array), the displayed text will be equivalent to yourParameter.toString() (that’s usually not very useful, so it’s best to supply string or numeric values).
- Whenever the user edits the value in the associated form control, KO will update the property on your view model.
- KO will always attempt to update your view model when the value has been modified and a user transfers focus to another DOM node (i.e., on the change event), but you can also trigger updates based on other events by using the valueUpdate parameter described below.
Additional parameters. If your binding also includes a parameter called valueUpdate, this defines additional browser events KO should use to detect changes besides the change event.
The following string values are the most commonly useful choices:. "input" - updates your view model when the value of an or
Note that this event is only raised by reasonably modern browsers (e.g., IE 9+). "keyup" - updates your view model when the user releases a key.
"keypress" - updates your view model when the user has typed a key.
Unlike keyup, this updates repeatedly while the user holds a key down. "afterkeydown" - updates your view model as soon as the user begins typing a character.
- This works by catching the browser’s keydown event and handling the event asynchronously.
- This does not work in some mobile browsers.
See Note 2 below. Note that valueAllowUnset is only applicable when using value to control selection on a
This is very useful if you want to let the user select from a set of model objects.
For examples of this, see the options binding or for handling multi-select lists, see the documentation for the selectedOptions binding.
You can also use the value binding with a
In this case, you can choose to specify your
But what happens if you set the model value to something that has no corresponding entry in the list? The default behavior is for Knockout to overwrite your model value to reset it to whatever is already selected in the dropdown, thereby preventing the model and UI from getting out of sync.
However, sometimes you might not want that behavior.
If instead you want Knockout to allow your model observable to take values that have no corresponding entry in the
When the user later selects an entry from the dropdown, this will be written to your model as usual. In the above example, selectedCountry will retain the value 'Latvia', and the dropdown will be blank, because there is no corresponding option.
If valueAllowUnset had not been enabled, then Knockout would have overwritten selectedCountry with undefined, so that it would match the value of the 'Choose one..'
If you use value to link a form element to an observable property, KO is able to set up a 2-way binding so that changes to either affect the other.
It cannot detect when the property changes (because it isn’t observable), so this is only a 1-way binding. If you reference something that is not a simple property, e.g., the result of a function call or comparison operation, KO will set the form element’s initial state to that value, but it will not be able to write any changes back when the user edits the form element.