KnockoutJS - Value Binding

This binding is used to link respective DOM element's value into ViewModel property. Mostly, this is used with elements such as input, select, and textarea. This is similar to text binding, the difference being, in value binding data can be changed by the user and the ViewModel will update it automatically.

Syntax

value: <binding-value>

Parameters

  • HTML DOM element's value property is set to parameter value. Earlier values will be overwritten.

  • If the parameter is an observable value, then the elements value is updated as and when the underlying observable is changed. Element is processed only once if no observable is used.

  • valueUpdate is an extra parameter which can also be supplied for extra features. KO uses additional events to detect extra changes when valueUpdate parameter is used in binding. Following are some common events −

    • input − ViewModel is updated when the value of input element changes.

    • keyup − ViewModel is updated when the key is released by the user.

    • keypress − ViewModel is updated when the key is typed.

    • afterkeydown − ViewModel keeps on updating as soon as the user starts typing the character.

Example

Let us look at the following example which demonstrates the use of value binding.

Live Demo 
<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Enter your name: 
         <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />
      </p>
      
      <p>Your name is : <span data-bind = "text: yourName"></span></p>

      <script type = "text/javascript">
         function ViewModel () {
            this.yourName = ko.observable('');
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above code in value-bind.htm file.

  • Open this HTML file in a browser.

  • The data entered in the textbox is updated immediately due to the use of valueUpdate.

Observations

Receiving value updates immediately from inputs

If you want the input element to give immediate updates to your ViewModel, then use the textInput binding. It is better than valueUpdate options, taking into consideration the weird behavior of browsers.

Dealing with drop-down list (<select> elements)

KO supports drop-down list (<select> elements) in a special way. The value binding and options binding work together allowing you to read and write values, which are random JavaScript objects and not just String values.

Using valueAllowUnset with <select> elements

Using this parameter, it is possible to set the model property with value which does not actually exist in the select element. This way one can keep the default option as blank when the user views drop-down for the very first time.

Example

Let us take a look at the following example in which valueAllowUnset option is used.

Live Demo 
<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding - working with drop-down lists</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Select a City:
         <select data-bind = " options: cities,
            optionsCaption: 'Choose City...',
            value: selectedCity,
            valueAllowUnset: true"></select>
      </p>

      <script type = "text/javascript">
         function ViewModel() {
            this.cities = ko.observableArray(['Washington D.C.', 'Boston', 'Baltimore']);
            selectedCity = ko.observable('Newark')
         };
         
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above code in value-bind-drop-down.htm file.

  • Open this HTML file in a browser.

  • selectedCity is assigned with value which is not present in the list. This makes the drop-down blank for the first time.

Updating observable and non-observable property values

KO is able to create a two-way binding if you use value to link a form element to an Observable property, so that the changes between them are exchanged among them.

If you use a non-observable property (a plain String or a JavaScript expression), then KO will do the following −

  • If you refer a simple property on ViewModel, KO will set the form element's initial state to property value. If the form element is changed, then KO will write back the new values to property but it cannot detect any changes in the property, thus making it a one-way binding.

  • If you refer something which is not simple, such as the result of comparison or a function call then, KO will set the form element's initial state to that value but cannot write any more changes made to the form element by the user. We can call this as one-time value setter.

Example

Following code snippet shows the use of observable and non-observable properties.

<!-- Two-way binding. Populates textbox; syncs both ways. -->
<p>First value: <input data-bind="value: firstVal" /></p>

<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondVal" /></p>

<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondVal.length > 8" /></p>

<script type = "text/javascript">
   function viewModel() {
      firstVal =  ko.observable("hi there"),     // Observable
      secondVal = "Wats up!!!"                   // Not observable
   };
</script>

Using value binding with the checked binding

If you include value binding with the checked binding, then the value binding will behave like checkedValue option, which can be used with checked binding. It will control the value used for updating ViewModel.

knockoutjs_declarative_bindings.htm
Advertisements