KnockoutJS - Liaison de valeur

Cette liaison est utilisée pour lier la valeur de l'élément DOM respectif dans la propriété ViewModel. Surtout, ceci est utilisé avec des éléments tels queinput, select, et textarea. Ceci est similaire à la liaison de texte, la différence étant que les données de liaison de valeur peuvent être modifiées par l'utilisateur et le ViewModel le mettra à jour automatiquement.

Syntax

value: <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 une valeur 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.

  • valueUpdate est un paramètre supplémentaire qui peut également être fourni pour des fonctionnalités supplémentaires. KO utilise des événements supplémentaires pour détecter des modifications supplémentaires lorsque le paramètre valueUpdate est utilisé dans la liaison. Voici quelques événements courants -

    • input - ViewModel est mis à jour lorsque la valeur de l'élément d'entrée change.

    • keyup - ViewModel est mis à jour lorsque la clé est relâchée par l'utilisateur.

    • keypress - ViewModel est mis à jour lorsque la clé est tapée.

    • afterkeydown - ViewModel continue de se mettre à jour dès que l'utilisateur commence à taper le caractère.

Example

Regardons l'exemple suivant qui illustre l'utilisation de la liaison de valeur.

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

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

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

  • Ouvrez ce fichier HTML dans un navigateur.

  • Les données saisies dans la zone de texte sont mises à jour immédiatement en raison de l'utilisation de valueUpdate.

Observations

Réception immédiate des mises à jour de valeur à partir des entrées

Si vous souhaitez que l'élément d'entrée donne des mises à jour immédiates à votre ViewModel, utilisez la liaison textInput. C'est mieux que les options valueUpdate, compte tenu du comportement étrange des navigateurs.

Gestion de la liste déroulante (éléments <select>)

KO prend en charge la liste déroulante (éléments <select>) d'une manière spéciale. La liaison de valeur et la liaison d'options fonctionnent ensemble, ce qui vous permet de lire et d'écrire des valeurs, qui sont des objets JavaScript aléatoires et pas seulement des valeurs String.

Utilisation de valueAllowUnset avec des éléments <select>

En utilisant ce paramètre, il est possible de définir la propriété du modèle avec une valeur qui n'existe pas réellement dans l'élément select. De cette façon, on peut garder l'option par défaut vide lorsque l'utilisateur affiche la liste déroulante pour la toute première fois.

Example

Jetons un coup d'œil à l'exemple suivant dans lequel l'option valueAllowUnset est utilisée.

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

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

  • Enregistrez le code ci-dessus dans value-bind-drop-down.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • selectedCity reçoit une valeur qui n'est pas présente dans la liste. Cela rend la liste déroulante vide pour la première fois.

Mise à jour des valeurs de propriété observables et non observables

KO est capable de créer une liaison bidirectionnelle si vous utilisez value pour lier un élément de formulaire à une propriété Observable, de sorte que les modifications entre eux soient échangées entre eux.

Si vous utilisez une propriété non observable (une chaîne simple ou une expression JavaScript), alors KO fera ce qui suit -

  • Si vous faites référence à une propriété simple sur ViewModel, KO définira l'état initial de l'élément de formulaire sur la valeur de propriété. Si l'élément de formulaire est modifié, alors KO réécrira les nouvelles valeurs dans la propriété, mais il ne pourra détecter aucune modification de la propriété, ce qui en fera une liaison unidirectionnelle.

  • Si vous faites référence à quelque chose qui n'est pas simple, comme le résultat d'une comparaison ou d'un appel de fonction, KO définira l'état initial de l'élément de formulaire sur cette valeur mais ne pourra plus écrire les modifications apportées à l'élément de formulaire par l'utilisateur. Nous pouvons appeler cela comme un paramètre de valeur unique.

Example

L'extrait de code suivant montre l'utilisation de propriétés observables et non 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>

Utilisation de la liaison de valeur avec la liaison vérifiée

Si vous incluez la liaison de valeur avec la liaison vérifiée, la liaison de valeur se comportera comme l'option checkedValue, qui peut être utilisée avec la liaison vérifiée. Il contrôlera la valeur utilisée pour mettre à jour ViewModel.