knockout.js
Encuadernaciones - campos de formulario

Hacer clic

El enlace de click se puede usar con cualquier elemento DOM visible para agregar un controlador de eventos, que invocará una función de JavaScript, cuando se click en el elemento.

<button data-bind="click: onClick">Click me</button>

ko.applyBindings({
  onClick: function(data, event) {
    // data: the context of the element that triggered the event
    console.log(data);

    // event: the click event
    console.log(event);
  }
});

Opciones

Utilice este enlace para crear opciones para un elemento seleccionado

<select data-bind="options: gasGiants"></select>
 
<script type="text/javascript">
    var viewModel = {
        gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
    };
</script>

También puede usar propiedades dentro de la matriz para mostrar en la lista y para guardar en viewModel: optionsText permite un texto de visualización personalizado

optionsValue establece la propiedad de valor de la <option> correspondiente

value almacena el valor de la opción seleccionada en un observable del viewModel

<select data-bind="options: gasGiants, optionsText:'name', optionsValue:'id', value:selectedPlanetId"></select>
 
<script type="text/javascript">
    var viewModel = {
        selectedPlanetId: ko.observable(),
        gasGiants: ko.observableArray([{name:'Jupiter', id:'0'},
                                       {name:'Saturn', id:'1'},
                                       {name:'Neptune', id:'2'},
                                       {name:'Uranus', id:'3'}])
    };
</script>

Para almacenar los resultados de una lista de selección múltiple, el enlace de opciones se puede combinar con el enlace de Opciones selectedOptions .

<select data-bind="options: gasGiants, selectedOptions: chosenGasGiants" multiple="true"></select>

<script type="text/javascript">
    var viewModel = {
        gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
        chosenGasGiants: ko.observableArray(['Jupiter','Saturn']) // Initial selection
    }; </script>

deshabilitado / habilitado

El enlace deshabilitado agrega un atributo disabled a un elemento html, por lo que ya no se puede editar ni hacer clic. Esto es útil principalmente para los elementos <input> , <select> , <textarea> , <a> y <button>

<input data-bind="disabled: disableInput"/> 

<script type="text/javascript">
var viewModel = {
    disableInput: ko.observable(true);
};
</script>

El inverso del enlace disabled está enabled

La visibilidad también se puede calcular utilizando las funciones de JavaScript. Cualquier observable usado en estas funciones tiene que ser llamado entre paréntesis.

<script type="text/javascript">
var viewModel = {
    disableInput: ko.observable(true);
};
</script>

o

<input data-bind="disabled: allValues().length>4"/> 

<script type="text/javascript">
var viewModel = {
    allValues: ko.observableArray([1,2,3,4,5]);
};
</script>

enviar

El controlador de eventos se invoca cuando se envía un elemento DOM.

<form data-bind="submit: doSomething">
    <!-- form content here -->
    <button type="submit"></button>
</form>

<script type="text/javascript">    
    var vm = { 
        doSomething: function(data){
            //do something here
        }; 
    }
</script>

Knockout evitará la acción de envío predeterminada del navegador para ese formulario. Si desea que su formulario se envíe como un formulario HTML normal, simplemente devuelva true en el controlador de envío.

Valor

Utilice el enlace de valores para obtener el valor de un elemento. El enlace de valores se puede aplicar a cualquier control de formulario, sin embargo, hay otros enlaces que pueden ser más adecuados para casillas de verificación, botones de radio y entradas de texto.

El siguiente ejemplo ilustra cómo aplicar el elemento de enlace a varios campos de entrada de formulario y cómo rellenar los valores predeterminados:

Definición de ViewModel:

var MyViewModel = function(){
    var self = this;
  //Initialize valueOne
  self.valueOne = ko.observable();
  //Initialize valueTwo with a default value of "Value two"
  self.valueTwo = ko.observable("Value two");
  //Initialize the color dropdown, and by default, select the "blue" option
  self.color = ko.observable("blue");
  
  self.valueOne.subscribe(function(newValue){
      console.log("valueOne: " + newValue);
  });
  
  self.valueTwo.subscribe(function(newValue){
      console.log("valueTwo: " + newValue);
  });
  
  self.color.subscribe(function(newValue){
      console.log("color: " + newValue);
  });
}

Marcado asociado:

<input type="text" data-bind="value: valueOne" />
<input type="text" data-bind="value: valueTwo" />

<select data-bind="value: color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

En el ejemplo anterior, cuando un valor cambia, el nuevo valor se registrará en la consola. Los valores iniciales no activarán un evento de cambio.

De forma predeterminada, el enlace de valor define un cambio como un cambio en el valor de los elementos y el enfoque se transfiere a otro elemento. Esto se puede alterar usando la opción valueUpdate:

<input type="text" data-bind="value: valueOne, valueUpdate: 'keyup'" />

El ejemplo anterior cambiará la actualización de valor para activarse en la tecla arriba. Las opciones disponibles son entrada, keyup, keypress y afterkeydown.