KnockoutJS - binding textInput

Questa associazione viene utilizzata per creare un'associazione bidirezionale tra la casella di testo o l'area di testo e la proprietà ViewModel. La differenza tra questo e il valore vincolante è che questo legame rende disponibili aggiornamenti immediati da HTML DOM per vari tipi di input.

Syntax

textInput: <binding-value>

Parameters

  • La proprietà value dell'elemento HTML DOM è impostata sul valore del parametro. I valori precedenti verranno sovrascritti.

  • Se il parametro è qualcosa di diverso da un numero o una stringa (come un oggetto o un array), il testo visualizzato è equivalente al formato String.

  • Se il parametro è un osservabile, il valore dell'elemento viene aggiornato man mano che viene modificato l'osservabile sottostante. L'elemento viene elaborato una sola volta, se non viene utilizzato alcun osservabile.

  • Nella maggior parte delle situazioni textInput è preferito rispetto all'associazione di valori a causa della capacità di textInput di fornire aggiornamenti in tempo reale da DOM per ogni tipo di input e la capacità di gestire strani comportamenti dei browser.

Example

Diamo un'occhiata al seguente esempio che dimostra l'uso dell'associazione 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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato textinput-bind.htm file.

  • Apri questo file HTML in un browser.

  • I dati inseriti in textarea vengono aggiornati immediatamente in ViewModel.

Osservazioni

textInput vs associazione valore

textInput binding fornisce aggiornamenti in tempo reale immediati. Le principali differenze tra textInput e value Binding sono:

Immediate updates- Per impostazione predefinita, l'associazione del valore aggiorna il modello solo quando l'utente sposta il focus fuori dalla casella di testo. L'associazione textInput aggiorna il modello immediatamente dopo ogni pressione di un tasto o su un altro meccanismo di immissione del testo.

Browser event weirdness handling- I browser sono altamente imprevedibili negli eventi che si attivano in risposta all'insolito meccanismo di immissione del testo come il trascinamento, il taglio o il suggerimento del completamento automatico. L'associazione di valori non gestisce tutti i casi di immissione di testo su tutti i browser.

L'associazione textInput è progettata appositamente per gestire un'ampia gamma di comportamenti strani dei browser. In questo modo fornisce aggiornamenti del modello coerenti e istantanei, anche in caso di meccanismi di immissione di testo insoliti.