KnockoutJS CSS Bindings

Till now, we have covered visible binding, text binding and html bindings. Now is the time to study yet another extremely important type of binding i.e. knockoutJS CSS bindings. This type of binding basically adds or remove a class from you cascading style sheet to an element. CSS bindings are particularly helpful when you want to change the style of an element depending upon a certain condition. Let’s have a look at at a simple example of knockoutJS CSS bindings.

<!DOCTYPE html>
<html>
    
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

 <style>
      .warningMessage {
      color: red;
      font-weight: bold;
      }
   </style>
</head>
<body>
   <div data-bind="css: { warningMessage : StudentAge() <= 0 }">
      Age should be greater than 0.
   </div>

   <script>
      function StudentModel() {
         this.StudentAge = ko.observable(0);
      }
      var sm = new StudentModel();
      ko.applyBindings(sm);
   </script>
</body>
</html>

Download the code Try the code

Take a look at the above code. First go to the header section, here we have defined an internal style. We have specify a class which changes the color of the text to bold and change its color. The name of the class is the “warningMessage”. Now take a look at the html view. Here inside the div we use data-bind attribute to set the css of the div to “warningMessage” if the StudentAge parameter of the StudentModel is greater than 0. Notice the synax for css binding. It is similar to JavaScript object notation where the first parameter is the name object and second parameter is its value. The second parameter in this case is the expression. If this expression returns true, the “warningMessage” class will be applied to the div.

Now come to the JavaScript section of the code, here we create a StudentModel which has a parameter StudentName with value 0. If you change the value of this parameter to anything greater than 0, the color of the text in the div shall change to default.

Apart from passing the expression which returns to true or false, you can directly pass the true-like or false-like value. For instance in the following example StudentMale parameter is set to true. This parameter is then used for CSS binding which changes color and weight of the text to bold. Take a look at the following example.

<!DOCTYPE html>
<html>
    
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

 <style>
      .warningMessage {
      color: red;
      font-weight: bold;
      }
   </style>
</head>
<body>
   <div data-bind="css: { warningMessage : StudentMale }">
      Age should be greater than 0.
   </div>

   <script>
      function StudentModel() {
    
          this.StudentMale = ko.observable(true);
      }
      var sm = new StudentModel();
      ko.applyBindings(sm);
   </script>
</body>
</html>

Download the code Try the code

<<< KnockoutJS Text & HTML BindingsknockoutJS Style Binding >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .