KnockoutJS - Estilo de encuadernación

Style Binding le permite aplicar estilo en línea al elemento DOM de HTML manipulando el atributo de estilo del elemento en lugar de aplicar clases CSS. Este enlace requiere un par clave-valor debido al estilo en línea.

Sintaxis

style: <binding-object>

Parámetros

El objeto JavaScript debe pasarse como un parámetro en el que el nombre de la propiedad se refiere al atributo de estilo y los valores se refieren a los valores deseados que se aplicarán a los elementos.
También se pueden aplicar varios estilos a la vez. Suponga que tiene una propiedad de descuento en su ViewModel y desea agregarla, entonces el código se verá así:

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

Si el producto Stock no está disponible, la fuente se vuelve roja. De lo contrario, se vuelve azul. Si el descuento se establece en verdadero, los detalles del producto se volverán en negrita. De lo contrario, permanecerá en fuente normal.

Si la propiedad ViewModel es observable, los estilos se aplican según el nuevo valor de parámetro actualizado. Si no es un valor observable, el estilo se aplica solo una vez por primera vez.

Ejemplo

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

Salida

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

Guarde el código anterior en style-bind.htm archivo.
Abra este archivo HTML en un navegador.
Si productStock cae por debajo de 0, los detalles del producto se vuelven rojos. De lo contrario, si hay stock disponible, se vuelve negro.

Observaciones

Nombres de variables de JavaScript ilegales

Nombre de estilo CSS font-weightno está permitido en JavaScript. En cambio, escríbalo comofontWeight (El guión en los nombres de las variables no está permitido en JavaScript).

Haga clic aquí para ver todos los atributos de estilo de JavaScript, que también están disponibles en el sitio oficial de KO.

↰ Previous page