KnockoutJS - Liaison CSS

Cette liaison vous permet de définir des classes CSS pour les éléments HTML DOM en fonction de certaines conditions. Ceci est utile au cas où vous auriez besoin de mettre en évidence certaines données en fonction d'une situation.

Syntaxe

css: <binding-object>

Paramètres

  • En cas de liaison CSS statique, le paramètre peut être sous la forme d'un objet JavaScript, composé de la propriété et de sa valeur.

    • Property ici se réfère à la classe CSS à appliquer et value peut être une valeur booléenne true ou false, ou une expression JavaScript ou une fonction.

    • Classes peut également être appliqué dynamiquement à l'aide des fonctions calculées observables.

  • Plusieurs classes CSS peuvent également être appliquées à la fois. Voici un exemple de la façon dont 2 classes sont ajoutées à la liaison.

<div data-bind = "css: { 
   outOfStock : productStock() === 0, 
   discountAvailable: discount 
}">

  • Les noms de classe peuvent également être spécifiés entre guillemets simples tels que «remise disponible».

  • 0 et null sont traités comme une valeur fausse. Les nombres et autres objets sont traités comme de la vraie valeur.

  • Si la propriété ViewModel est une observable, les classes CSS sont décidées en fonction de la nouvelle valeur de paramètre mise à jour. S'il ne s'agit pas d'une valeur observable, les classes ne sont déterminées qu'une seule fois pour la première fois.

Exemple

Jetons un coup d'œil à l'exemple suivant qui illustre l'utilisation de la liaison CSS.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS CSS binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
      
      <style>
         .outOfStock {
            color: red;
            font-weight: bold;
         }
      </style>
      
   </head>
   
   <body>
      <div data-bind = "css: { outOfStock : productStock() === 0 }">
         Product Details.
      </div>

      <script>
         function AppViewModel() {
            this.productStock = ko.observable(0);
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Production

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

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

  • Ouvrez ce fichier HTML dans un navigateur.

  • Les informations sur le produit sont affichées de manière normale lorsque la propriété du stock de produit est supérieure à 0. Les informations sur le produit deviennent rouges et en gras. une fois que productStock devient 0.