KnockoutJS - enlace de entrada de texto

Este enlace se utiliza para crear un enlace bidireccional entre el cuadro de texto o área de texto y la propiedad ViewModel. La diferencia entre esto y el enlace de valor es que este enlace hace que las actualizaciones inmediatas estén disponibles desde HTML DOM para varios tipos de entrada.

Syntax

textInput: <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 no es un Número o una Cadena (como un objeto o una matriz), el texto mostrado es equivalente a un formato de Cadena.
Si el parámetro es un observable, entonces 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.
En la mayoría de las situaciones, se prefiere textInput sobre el enlace de valores debido a la capacidad de textInput para proporcionar actualizaciones en vivo desde DOM para cada tipo de entrada y la capacidad de manejar comportamientos extraños de los navegadores.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace textInput.

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

   <body>
      <p> Enter your reviews here: <br><br><textarea rows=5 
      data-bind = "textInput: someReview" ></textarea><br></p>
      
      <p> You entered : <span data-bind = "text: someReview"></span></p>

      <script type = "text/javascript">
         function ViewModel() {
            this.someReview = 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 textinput-bind.htm archivo.
Abra este archivo HTML en un navegador.
Los datos ingresados en textarea se actualizan en ViewModel inmediatamente.

Observaciones

textInput vs Value binding

El enlace textInput proporciona actualizaciones en vivo inmediatas. Las principales diferencias entre textInput y value Binding son:

Immediate updates- De forma predeterminada, el enlace de valor solo actualiza el modelo cuando el usuario mueve el foco fuera del cuadro de texto. El enlace textInput actualiza el modelo instantáneamente después de cada pulsación de tecla o en otro mecanismo de entrada de texto.

Browser event weirdness handling- Los navegadores son altamente impredecibles en los eventos que se activan en respuesta al mecanismo de entrada de texto inusual, como arrastrar, cortar o permitir la sugerencia de autocompletar. El enlace de valores no maneja todos los casos de entrada de texto en todos los navegadores.

El enlace textInput está especialmente diseñado para manejar una amplia gama de comportamientos extraños de los navegadores. De esta manera, proporciona actualizaciones de modelos consistentes e instantáneas, incluso en caso de mecanismos de entrada de texto inusuales.

↰ Previous page