KnockoutJS CSS Binding

Posted By Rajan Rawat | 27-Jun-2017

The Css Binding

The css binding by this you are allowed to define css classes for your HTML DOM elements which are based on certain conditions. This thing is very useful in a case where you want a highlight some specific data depending on a situtation

Syntax

css : <binding-object>

Parameters

  • The static Css binding will be in form of javascript object, consisting of property and its value.

          Here the property refers to that CSS class which will be applied and value can be a boolean true, or false or it can ba javascript expression or a function

          Dynamic class can also be applied using the computed observable function 

  • Css multiple classes can also be applied at once . see the below code how to two classes are added to binding

 

  • In any case if the viewmodel property is an observable then the css classes will decided depending on new updated parameter. If the viewmodel is not an observable vlaue then the classes are determined once for first time

Let's see the below example for css binding

HTML

Product Details.

JS

 function AppViewModel() {
         this.availableStock = ko.observable(0);
      }
      var sx = new AppViewModel();
      ko.applyBindings(sx);

CSS

.Stock {
      color: #fff;
      font-weight: 600;
      }
Request for Proposal

Recaptcha is required.

Sending message..