KnockoutJS - Options Binding

This binding is used to define the options for a select element. This can be used for either drop-down list or a multi-select list. This binding cannot be used with anything other than <select> elements.

Syntax

options: <binding-array>

Parameters

  • Parameter to be passed here is an array. For each entry in array, the option will be added for respective select node. Earlier option will be removed.

  • If the parameter is an observable value, then the element's available options will be updated as and when the underlying observable is changed. Element is processed only once, if no observable is used.

  • Additional Parameters

    • optionsCaption − This is just a default dummy value, which reads as 'Select item from below' or 'Choose from below'.

    • optionsText − This parameter allows you to specify which object property you want to set as text in the dropdown list. This parameter can also include a function, which returns the property to be used.

    • optionsValue − Similar to optionsText. This parameter allows to specify which object property can be used to set the value attribute of the option elements.

    • optionsIncludeDestroyed − Specify this parameter if you want to see array items which are marked as destroyed and are not actually deleted from observable array.

    • optionsAfterRender − Use this for running some custom logic on the existing option elements.

    • selectedOptions − This is used to read and write the selected options from a multi select list.

    • valueAllowUnset − Using this parameter, it is possible to set model property with the value which does not actually exist in the select element. This way one can keep 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 which demonstrates the use of options binding.

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

   <body>
      <p>Tutorials Library:
      <select data-bind = "
         options: availableTutorials,
         value: selectedTutorial,
         optionsCaption: 'Choose tutuorial...',
      "></select></p>
      
      <p>You have selected <b><span 
         data-bind = "text:selectedTutorial"></span></b></p>

      <script type = "text/javascript">
         function ViewModel() {
            this.selectedTutorial = ko.observable();
         
            this.availableTutorials = ko.observableArray ([
               'Academic','Big Data',
               'Databases','Java Technologies',
               'Mainframe','Management',
               'Microsoft Technologies','Mobile Development',
               'Programming','Software Quality'
            ]);
         };
         
         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 options-bind.htm file.

  • Open this HTML file in a browser.

  • Note that the value binding is used to read thecurrent selected item from the dropdown.

Observations

Selection is preserved when setting/changing options

KO will leave the user's selection unchanged where possible, while the options binding updates the set of options in <select> element. For a single select in the drop-down list, the previously selected value will still be preserved. For multi select list, all previously selected options will be preserved.

Post-processing the generated options

The generated options can be post processed for some further custom logic with the help of optionsAfterRender callback. This function is executed after each element is inserted into the list, with the following parameters −

  • The option element which is inserted.

  • The data item against which it is bound; this will be undefined for the caption element.

Example

Let us take a look at the following example which uses optionsAfterRender to add a disable binding to each option.

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

   <body>
      <select size = 3 data-bind = "
         options: myItems,
         optionsText: 'name',
         optionsValue: 'id',
         optionsAfterRender: setOptionDisable">
      </select>

      <script type = "text/javascript">
         function ViewModel() {
            myItems = [
               { name: 'First Class', id: 1, disable: ko.observable(false)},
               { name: 'Executive Class', id: 2, disable: ko.observable(true)},
               { name: 'Second Class', id: 3, disable: ko.observable(false)}
            ];
            
            setOptionDisable = function(option, item) {
               ko.applyBindingsToNode(option, {disable: item.disable}, item);
            }
         };
      
         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 options-bind-optionsafterrender.htm file.

  • Open this HTML file in a browser.

  • Option with id 2 is disabled using optionsAfterRender callback.

knockoutjs_declarative_bindings.htm
Advertisements