KnockoutJS - liaison textInput

Cette liaison est utilisée pour créer une liaison bidirectionnelle entre la zone de texte ou la zone de texte et la propriété ViewModel. La différence entre ceci et la liaison de valeur est que cette liaison rend des mises à jour immédiates disponibles à partir du DOM HTML pour divers types d'entrée.

Syntax

textInput: <binding-value>

Parameters

  • La propriété value de l'élément HTML DOM est définie sur valeur de paramètre. Les valeurs antérieures seront écrasées.

  • Si le paramètre est autre chose qu'un nombre ou une chaîne (comme un objet ou un tableau), le texte affiché est équivalent à un format chaîne.

  • Si le paramètre est une observable, la valeur des éléments est mise à jour au fur et à mesure que l'observable sous-jacente est modifiée. L'élément n'est traité qu'une seule fois, si aucune observable n'est utilisée.

  • Dans la plupart des situations, textInput est préféré à la liaison de valeur en raison de la capacité de textInput à fournir des mises à jour en direct à partir du DOM pour chaque type d'entrée et la capacité à gérer le comportement étrange des navigateurs.

Example

Jetons un coup d'œil à l'exemple suivant qui illustre l'utilisation de la liaison 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

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans textinput-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Les données saisies dans textarea sont immédiatement mises à jour dans ViewModel.

Observations

textInput vs liaison de valeur

La liaison textInput fournit des mises à jour en direct immédiates. Les principales différences entre textInput et value Binding sont:

Immediate updates- Par défaut, la liaison de valeur met à jour le modèle uniquement lorsque l'utilisateur déplace le focus hors de la zone de texte. La liaison textInput met à jour le modèle instantanément après chaque frappe ou sur tout autre mécanisme de saisie de texte.

Browser event weirdness handling- Les navigateurs sont très imprévisibles dans les événements qui se déclenchent en réponse au mécanisme de saisie de texte inhabituel tel que glisser, couper ou autoriser la suggestion de saisie semi-automatique. La liaison de valeur ne gère pas tous les cas de saisie de texte sur tous les navigateurs.

La liaison textInput est spécialement conçue pour gérer un large éventail de comportements étranges des navigateurs. De cette façon, il fournit des mises à jour cohérentes et instantanées du modèle, même en cas de mécanismes de saisie de texte inhabituels.