KnockoutJS - Encadernação de estilo

A vinculação de estilo permite aplicar estilo embutido ao elemento HTML DOM, manipulando o atributo de estilo do elemento em vez de aplicar classes CSS. Esta associação requer um par de valores-chave devido ao estilo embutido.

Sintaxe

style: <binding-object>

Parâmetros

O objeto JavaScript deve ser passado como um parâmetro em que o nome da propriedade se refere ao atributo de estilo e os valores se referem aos valores desejados a serem aplicados nos elementos.
Vários estilos também podem ser aplicados ao mesmo tempo. Suponha que você tenha uma propriedade de desconto em seu ViewModel e queira adicioná-la, então o código se parecerá com o seguinte -

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

Se o productStock não estiver disponível, a fonte ficará vermelha. Caso contrário, torna-se azul. Se o desconto for definido como verdadeiro, os Detalhes do Produto ficarão em negrito. Caso contrário, ele permanecerá na fonte normal.

Se a propriedade ViewModel for observável, os estilos serão aplicados dependendo do novo valor de parâmetro atualizado. Se não for um valor observável, o estilo será aplicado apenas uma vez, pela primeira vez.

Exemplo

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

Resultado

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

Salve o código acima em style-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Se productStock ficar abaixo de 0, então os detalhes do produto tornam-se vermelhos. Caso contrário, se houver estoque disponível, ele se tornará preto.

Observações

Nomes de variáveis Javascript ilegais

Nome do estilo CSS font-weightnão é permitido em JavaScript. Em vez disso, escreva comofontWeight (Hífen em nomes de variáveis não é permitido em JavaScript).

Clique aqui para todos os atributos de estilo JavaScript, que também estão disponíveis no site oficial do KO.

↰ Previous page