Introducción a Knockout (III) - El uso del data-bind options

A raíz de una pregunta sobre como podríamos detectar la selección de un elemento en un combobox o dropdown me he puesto a mirar a fondo como funciona el data-bind options de knockout. Mirando su documentación, este data-bind, se usa en los dropdown-list o en los multiselect-list. Fuera de estos elementos el elementos este data-bind no realiza ninguna acción.

Para usarlo tan sólo debemos hacer poner esto en nuestro html

<h2>Ejemplo de uso de Knockout</h2>
<h3>Seleccione una opción</h3>
<select data-bind="options: optionValues, value: selectedOptionValue"></select>

y definir nuestro modelo MVVM de la siguiente manera

<script type="text/javascript" language="javascript">
    function ViewModel() {
     var self = this;

     self.optionValues = ['Alpha', 'Beta', 'Gamma'];
     self.selectedOptionValue = ko.observable("Gamma");
     });
    }
    ko.applyBindings(new ViewModel());
</script>

Como vemos, usamos un select html donde definiremos el data-bind options, asignándole los datos que tengamos en la propiedad optionValues de nuestro modelo y asignando el observador selectionOptionValue para detectar los cambios. En caso que queramos detectar el cambio de valores, podemos usar la función suscribe de la siguiente manera

<script type="text/javascript" language="javascript">
    function ViewModel() {
     var self = this;

     self.optionValues = ['Alpha', 'Beta', 'Gamma'];
     self.selectedOptionValue = ko.observable("Gamma");
     self.selectedOptionValue.subscribe(function (value) {
      alert("El valor seleccionado es " + value);
     });
    }
    ko.applyBindings(new ViewModel());
</script>

Podemos complicar un poco nuestro modelo para asignar un objeto en vez de una lista plana de elementos. Esto se acerca más a la realidad donde probablemente mostremos algún objeto del tipo clave / valor. También podemos hacer que el dropdown-list presente el clásico mensaje "Seleccione un valor...". Para esto definiremos nuestro select html de la siguiente manera

<h2>Ejemplo de uso de Knockout</h2>
<h3>Seleccione una opción</h3>
<select data-bind="options: optionValues, optionsText: 'value', optionsValue: 'id', value: selectedOptionValue, optionsCaption: 'Seleccione una opción...'"></select>

y nuestro modelo así

<script type="text/javascript" language="javascript">
    function ViewModel() {
     var self = this;

     self.optionValues = [{ id: "1", value: "valor1" }, { id: "2", value: "valor2"}];
     self.selectedOptionValue = ko.observable("2");
     self.selectedOptionValue.subscribe(function (value) {
      alert("El valor seleccionado es " + value.id);
     });
    }
    ko.applyBindings(new ViewModel());
</script>

Como vemos definimos un objeto simple con una propiedad id y otra propiedad valor, que asignamos a la propiedad optionValues que será usada para rellenar el dropdown-list. También definimos el optionsText, que indica la propiedad usada como texto en el select, y el optionsValue que no indica el value. El mensaje "Seleccione una opción..." es definido mediante la opción optionsCaption. Vemos que al igual que en las lista planas también podemos hacer uso de la función suscribe para manejar nosotros la selección de un elemento.

Vemos como con knockout es bastante fácil manejar los dropdown-list.

Happy coding!