KnockoutJS - Vinculación de valor

Este enlace se utiliza para vincular el valor del elemento DOM respectivo a la propiedad ViewModel. Principalmente, esto se usa con elementos comoinput, selecty textarea. Esto es similar al enlace de texto, la diferencia es que el usuario puede cambiar los datos de enlace de valor y ViewModel los actualizará automáticamente.

Syntax

value: <binding-value>

Parameters

La propiedad de valor del elemento DOM HTML se establece en valor de parámetro. Se sobrescribirán los valores anteriores.
Si el parámetro es un valor observable, el valor de los elementos se actualiza a medida que se cambia el observable subyacente. El elemento se procesa solo una vez si no se utiliza ningún observable.
valueUpdate es un parámetro adicional que también se puede proporcionar para funciones adicionales. KO usa eventos adicionales para detectar cambios adicionales cuando se usa el parámetro valueUpdate en el enlace. A continuación se presentan algunos eventos comunes:
- input - ViewModel se actualiza cuando cambia el valor del elemento de entrada.
- keyup - ViewModel se actualiza cuando el usuario libera la clave.
- keypress - ViewModel se actualiza cuando se escribe la clave.
- afterkeydown - ViewModel sigue actualizándose tan pronto como el usuario comienza a escribir el carácter.

Example

Veamos el siguiente ejemplo que demuestra el uso de la vinculación de valores.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en value-bind.htm archivo.
Abra este archivo HTML en un navegador.
Los datos ingresados en el cuadro de texto se actualizan inmediatamente debido al uso de valueUpdate.

Observaciones

Recibir actualizaciones de valor inmediatamente de las entradas

Si desea que el elemento de entrada proporcione actualizaciones inmediatas a su ViewModel, utilice el enlace textInput. Es mejor que las opciones valueUpdate, teniendo en cuenta el comportamiento extraño de los navegadores.

Tratar con la lista desplegable (elementos <select>)

KO admite la lista desplegable (elementos <select>) de una manera especial. El enlace de valores y el enlace de opciones funcionan juntos, lo que le permite leer y escribir valores, que son objetos JavaScript aleatorios y no solo valores de cadena.

Usando valueAllowUnset con elementos <select>

Con este parámetro, es posible establecer la propiedad del modelo con un valor que no existe realmente en el elemento de selección. De esta manera, se puede mantener la opción predeterminada en blanco cuando el usuario ve el menú desplegable por primera vez.

Example

Echemos un vistazo al siguiente ejemplo en el que se utiliza la opción valueAllowUnset.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en value-bind-drop-down.htm archivo.
Abra este archivo HTML en un navegador.
selectedCity se asigna con un valor que no está presente en la lista. Esto deja el menú desplegable en blanco por primera vez.

Actualización de valores de propiedad observables y no observables

KO puede crear un enlace bidireccional si usa value para vincular un elemento de formulario a una propiedad observable, de modo que los cambios entre ellos se intercambien entre ellos.

Si usa una propiedad no observable (una cadena simple o una expresión de JavaScript), entonces KO hará lo siguiente:

Si refiere una propiedad simple en ViewModel, KO establecerá el estado inicial del elemento de formulario en el valor de la propiedad. Si se cambia el elemento del formulario, entonces KO escribirá los nuevos valores en la propiedad, pero no puede detectar ningún cambio en la propiedad, por lo que es un enlace unidireccional.
Si refiere algo que no es simple, como el resultado de una comparación o una llamada de función, KO establecerá el estado inicial del elemento del formulario en ese valor, pero no podrá escribir más cambios realizados por el usuario en el elemento del formulario. Podemos llamar a esto como establecedor de valor de una sola vez.

Example

El siguiente fragmento de código muestra el uso de propiedades observables y no observables.

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

Usando el enlace de valor con el enlace marcado

Si incluye el enlace de valor con el enlace marcado, entonces el enlace de valor se comportará como la opción CheckValue, que se puede utilizar con el enlace marcado. Controlará el valor utilizado para actualizar ViewModel.

↰ Previous page