KnockoutJS - Reliure visible

Comme son nom l'indique, cette liaison fait que l'élément DOM associé est visible ou masqué en fonction de la valeur transmise dans la liaison.

Syntaxe

visible: <binding-condition>

Paramètres

  • Lorsque le paramètre se transforme en une valeur de type faux (telle que booléenne false, ou 0, ou null ou undefined), les ensembles de liaisons affichent: aucun pour yourElement.style.display, ce qui le rend masqué. Cela a plus de priorité sur tous les styles existants dans CSS.

  • Lorsque le paramètre se transforme en valeur de type true (telle que booléenne true, ou objet ou tableau non nul), la liaison supprime la valeur yourElement.style.display, la rendant visible.

  • S'il s'agit d'une propriété observable, la liaison mettra à jour la visibilité à chaque fois que la propriété change. Sinon, la visibilité ne sera définie qu'une seule fois.

  • La valeur du paramètre peut également être une fonction JavaScript ou une expression JavaScript arbitraire qui renvoie une valeur booléenne. L'élément DOM est rendu visible ou masqué en fonction de la sortie.

Exemple

Jetons un œil à l'exemple suivant.

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

   <body>
      <div data-bind = "visible: showMe">
         You are seeing this line because showMe function is set to true.
      </div>

      <script>
         function AppViewModel() {
            this.showMe = ko.observable(false);  // hidden initially
         }

         var vm = new AppViewModel();
         ko.applyBindings(vm);                  //  shown now
         vm.showMe(true);
      </script>

   </body>
</html>

Production

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

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

  • Ouvrez ce fichier HTML dans un navigateur.