KnockoutJS - vinculação textInput

Essa associação é usada para criar uma associação bidirecional entre a caixa de texto ou textarea e a propriedade ViewModel. A diferença entre isso e a associação de valor é que essa associação disponibiliza atualizações imediatas do HTML DOM para vários tipos de entrada.

Syntax

textInput: <binding-value>

Parameters

A propriedade de valor do elemento HTML DOM é definida como o valor do parâmetro. Os valores anteriores serão substituídos.
Se o parâmetro for algo diferente de um Número ou String (como um objeto ou uma matriz), o texto exibido é equivalente a um formato de String.
Se o parâmetro for um observável, o valor dos elementos será atualizado conforme e quando o observável subjacente for alterado. O elemento é processado apenas uma vez, se nenhum observável for usado.
Na maioria das situações, textInput é preferível à vinculação de valor devido à capacidade de textInput de fornecer atualizações ao vivo do DOM para cada tipo de entrada e a capacidade de lidar com o comportamento estranho dos navegadores.

Example

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da vinculação 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

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código acima em textinput-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Os dados inseridos em textarea são atualizados no ViewModel imediatamente.

Observações

vinculação textInput vs Value

A vinculação textInput fornece atualizações ao vivo imediatas. As principais diferenças entre textInput e value Binding são -

Immediate updates- Por padrão, a associação de valor somente atualiza o modelo quando o usuário move o foco para fora da caixa de texto. A vinculação textInput atualiza o modelo instantaneamente após cada pressionamento de tecla ou em outro mecanismo de entrada de texto.

Browser event weirdness handling- Os navegadores são altamente imprevisíveis nos eventos que disparam em resposta ao mecanismo incomum de entrada de texto, como arrastar, cortar ou permitir a sugestão de preenchimento automático. A associação de valor não lida com todos os casos de entrada de texto em todos os navegadores.

A ligação textInput é especialmente projetada para lidar com uma ampla variedade de comportamentos estranhos de navegadores. Desta forma, ele fornece atualizações de modelo consistentes e instantâneas, mesmo no caso de mecanismos de entrada de texto incomuns.

↰ Previous page