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.
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.
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.

Additional Parameters
optionsCaption − This is just a default dummy value, which reads as 'Select item from below' or 'Choose from below'.
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.
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.
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.
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.
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.
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.
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.
<!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.
Save the above code in options-bind.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Note that the value binding is used to read thecurrent selected item from the dropdown.
Note that the value binding is used to read thecurrent selected item from the dropdown.
Tutorials Library:
      Choose tutuorial...AcademicBig DataDatabasesJava TechnologiesMainframeManagementMicrosoft TechnologiesMobile DevelopmentProgrammingSoftware Quality
You have selected 


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. 
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 option element which is inserted.
The data item against which it is bound; this will be undefined for the caption element.
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.
<!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.
Save the above code in options-bind-optionsafterrender.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Option with id 2 is disabled using optionsAfterRender callback.
Option with id 2 is disabled using optionsAfterRender callback.

    38 Lectures 
     2 hours 

 Skillbakerystudios
 Print
 Add Notes
 Bookmark this page