KnockoutJS - Reliure de style

La liaison de style vous permet d'appliquer un style en ligne à l'élément HTML DOM en manipulant l'attribut style de l'élément au lieu d'appliquer des classes CSS. Cette liaison nécessite une paire clé-valeur en raison du style en ligne.

Syntaxe

style: <binding-object>

Paramètres

L'objet JavaScript doit être passé en tant que paramètre dans lequel le nom de la propriété fait référence à l'attribut de style et les valeurs font référence aux valeurs souhaitées à appliquer aux éléments.
Plusieurs styles peuvent également être appliqués à la fois. Supposons que vous ayez une propriété de remise dans votre ViewModel et que vous souhaitiez l'ajouter, le code ressemblera à ce qui suit -

<div data-bind = "style: { 
   color: productStock() < 0 ? 'red' : 'blue', 
   fontWeight: discount() ? 'bold' : 'normal' 
}>

Si le stock de produit n'est pas disponible, la police devient rouge. Sinon, il devient bleu. Si la remise est définie sur true, les détails du produit deviendront une police en gras. Sinon, il restera dans la police normale.

Si la propriété ViewModel est observable, les styles sont appliqués en fonction de la nouvelle valeur de paramètre mise à jour. S'il ne s'agit pas d'une valeur observable, le style n'est appliqué qu'une seule fois pour la première fois.

Exemple

Jetons un œil à l'exemple suivant qui montre l'utilisation de la liaison de style.

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

      <script type = "text/javascript">
         function AppViewModel() {
            this.productStock = ko.observable(30000) // initially black as positive value
            this.productStock(-10);                  // now changes DIV's contents to red
         };
         
         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 style-bind.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Si productStock passe en dessous de 0, les détails du produit deviennent rouges. Sinon, si le stock est disponible, il devient noir.

Observations

Noms de variables Javascript illégaux

Nom du style CSS font-weightn'est pas autorisé dans JavaScript. Au lieu de cela, écrivez-le commefontWeight (Le trait d'union dans les noms de variable n'est pas autorisé en JavaScript).

Cliquez ici pour tous les attributs de style JavaScript, qui sont également disponibles sur le site officiel de KO.

↰ Previous page