KnockoutJS - Enlace CSS

Este enlace le permite definir clases CSS para los elementos DOM de HTML en función de determinadas condiciones. Esto es útil en caso de que necesite resaltar algunos datos dependiendo de una situación.

Sintaxis

css: <binding-object>

Parámetros

En el caso de enlace CSS estático, el parámetro puede tener la forma de Objeto JavaScript, que consta de propiedad y su valor.
- Property aquí se refiere a la clase CSS que se aplicará y value puede ser booleano verdadero o falso, o una expresión de JavaScript o una función.
- Classes también se puede aplicar dinámicamente utilizando funciones observables calculadas.
También se pueden aplicar varias clases de CSS a la vez. A continuación se muestra un ejemplo de cómo se agregan 2 clases al enlace.

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

Los nombres de las clases también se pueden especificar entre comillas simples, como "descuento disponible".
0 y nulo se tratan como valor falso. Los números y otros objetos se tratan como valor real.
Si la propiedad ViewModel es observable, las clases de CSS se deciden según el nuevo valor de parámetro actualizado. Si no es un valor observable, las clases se determinan solo una vez por primera vez.

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en css-bind.htm archivo.
Abra este archivo HTML en un navegador.
La información del producto se muestra de forma normal cuando la propiedad productStock está por encima de 0. La información del producto se vuelve roja y en negrita. una vez que productStock se convierte en 0.

↰ Previous page