KnockoutJS - Stile vincolante

Style Binding consente di applicare uno stile in linea all'elemento HTML DOM manipolando l'attributo di stile dell'elemento invece di applicare classi CSS. Questa associazione richiede una coppia chiave-valore a causa dello stile inline.

Sintassi

style: <binding-object>

Parametri

L'oggetto JavaScript deve essere passato come parametro in cui il nome della proprietà fa riferimento all'attributo di stile ei valori si riferiscono ai valori desiderati da applicare agli elementi.
È inoltre possibile applicare più stili contemporaneamente. Supponiamo che tu abbia una proprietà di sconto nel tuo ViewModel e desideri aggiungerla, quindi il codice sarà simile al seguente:

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

Se productStock non è disponibile, il carattere diventa rosso. Altrimenti, diventa blu. Se lo sconto è impostato su true, i dettagli del prodotto diventeranno in grassetto. Altrimenti, rimarrà nel carattere normale.

Se la proprietà ViewModel è osservabile, gli stili vengono applicati a seconda del nuovo valore del parametro aggiornato. Se non è un valore osservabile, lo stile viene applicato solo una volta per la prima volta.

Esempio

Diamo uno sguardo al seguente esempio che dimostra l'uso dello stile Binding.

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

Produzione

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

Salva il codice sopra in formato style-bind.htm file.
Apri questo file HTML in un browser.
Se productStock scende al di sotto di 0, i Dettagli del prodotto diventano rossi. Altrimenti, se lo stock è disponibile, diventa nero.

Osservazioni

Nomi di variabili JavaScript illegali

Nome stile CSS font-weightnon è consentito in JavaScript. Invece, scrivi comefontWeight (Il trattino nei nomi delle variabili non è consentito in JavaScript).

Fare clic qui per tutti gli attributi di stile JavaScript, disponibili anche sul sito ufficiale di KO.

↰ Previous page