Blog

  • KnockoutJS CSS Binding

    Posted by Rajan Rawat | Last Updated: 29-Jun-17

    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;
          }
    

Tags: Knockoutjs