KnockoutJS - If Binding

This binding allows you to present the conditionally. If the specified condition is true, then show data, else don't show.

if binding is similar to visible binding. Difference being, in visible binding the underlying HTML markup actually stays on DOM and is made visible based on the condition whereas in if binding, HTML markup is added or removed from DOM based on the condition.

Syntax

if: <binding-condition>

Parameters

  • Parameter is a condition you want to evaluate. If the condition evaluates to true or true-like value, then the given HTML markup will be processed. Else, it will be removed from DOM.

  • If the condition in the parameter contains an observable value, then the condition is re-evaluated whenever the observable value changes. Correspondingly, related markup will be added or removed based on the condition result.

Example

Let us take a look at the following example which demonstrates the use of if binding.

Live Demo 
<!DOCTYPE html>
   <head>
      <title>KnockoutJS if binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p><strong>Product details</strong></p>
      
      <table border = "1">
         <thead>
            <th>Product Name</th><th>Price</th><th>Nature</th>
         </thead>
         
         <tbody data-bind = "foreach: productArray ">
            <tr>
               <td><span data-bind = "text: productName"></span></td>
               <td><span data-bind = "text: price"></span></td>
               <td data-bind = "if: $data.price > 100 ">Expensive</td>
            </tr>
         </tbody>
      </table>

      <script type = "text/javascript">
         function AppViewModel() {
            self = this;
            
            self.productArray = ko.observableArray ([
               {productName: 'Milk', price: 100},
               {productName: 'Oil', price: 10},
               {productName: 'Shampoo', price: 1200}
            ]);
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above code in if-bind.htm file.

  • Open this HTML file in a browser.

  • This example will populate the third column which talks about the products’ nature (expensive or not) depending on the price. Note that the individual property is accessed using $data binding context.

Observations

Container-less if

There might be a situation when it is not possible to place data-binding inside a DOM element. Essential checking can still be performed with the help of container-less syntax based on the comment tags shown as follows.

The <!--ko--> and <!--/ko--> works as start and end markers making it a virtual syntax and binds the data as if it is a real container.

Example

Let's us take a look at the following example which demonstrates the use of container-less syntax.

Live Demo 
<!DOCTYPE html>
   <head>
      <title>KnockoutJS if binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <ul>
         <li>Monday</li>
         <li>Tuesday</li>
         <li>Wednesday</li>
         <li>Thursday</li>
         <li>Friday</li>
         <!-- ko {if: weekend} -->
         <li>Saturday - check if it is weekend.</li>
         <li>Sunday</li>
         <!-- /ko -->
      </ul>
      
      <script>
         function AppViewModel() {
            this.weekend = false;
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above code in if-container-less.htm file.

  • Open this HTML file in a browser.

knockoutjs_declarative_bindings.htm
Advertisements