KnockoutJS - CSS Binding

Essa associação permite definir classes CSS para os elementos HTML DOM com base em certas condições. Isso é útil caso você precise destacar alguns dados, dependendo de uma situação.

Sintaxe

css: <binding-object>

Parâmetros

No caso de vinculação CSS estática, o parâmetro pode estar na forma de Objeto JavaScript, consistindo em propriedade e seu valor.
- Property aqui se refere à classe CSS a ser aplicada e value pode ser booleano verdadeiro ou falso, ou expressão ou função JavaScript.
- Classes também pode ser aplicado dinamicamente usando funções observáveis computadas.
Várias classes CSS também podem ser aplicadas de uma vez. A seguir está um exemplo de como 2 classes são adicionadas à ligação.

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

Os nomes das classes também podem ser especificados entre aspas simples, como 'desconto disponível'.
0 e nulo são tratados como valor falso. Números e outros objetos são tratados como valor verdadeiro.
Se a propriedade ViewModel for observável, as classes CSS serão decididas de acordo com o novo valor de parâmetro atualizado. Se não for um valor observável, as classes são determinadas apenas uma vez, pela primeira vez.

Exemplo

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da vinculação 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código acima em css-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
As informações do produto são mostradas de forma normal quando a propriedade do estoque do produto está acima de 0. As informações do produto ficam vermelhas e em negrito. assim que o productStock se tornar 0.

↰ Previous page