KnockoutJS - Binding CSS

Questa associazione consente di definire classi CSS per gli elementi HTML DOM in base a determinate condizioni. Ciò è utile nel caso in cui sia necessario evidenziare alcuni dati a seconda di una situazione.

Sintassi

css: <binding-object>

Parametri

  • In caso di binding CSS statico, il parametro può essere nella forma di JavaScript Object, costituito da proprietà e dal suo valore.

    • Property qui si riferisce alla classe CSS da applicare e value può essere booleano true o false oppure un'espressione JavaScript o una funzione.

    • Classes può anche essere applicato dinamicamente utilizzando funzioni osservabili calcolate.

  • È anche possibile applicare più classi CSS contemporaneamente. Di seguito è riportato un esempio di come vengono aggiunte 2 classi all'associazione.

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

  • I nomi delle classi possono anche essere specificati tra virgolette singole come "sconto disponibile".

  • 0 e null vengono trattati come valore falso. I numeri e altri oggetti vengono trattati come valore reale.

  • Se la proprietà ViewModel è osservabile, le classi CSS vengono decise in base al nuovo valore del parametro aggiornato. Se non è un valore osservabile, le classi vengono determinate solo una volta per la prima volta.

Esempio

Diamo un'occhiata al seguente esempio che dimostra l'uso dell'associazione 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato css-bind.htm file.

  • Apri questo file HTML in un browser.

  • Le informazioni sul prodotto vengono visualizzate in modo normale quando la proprietà productStock è superiore a 0. Le informazioni sul prodotto diventano rosse e in grassetto. una volta che productStock diventa 0.