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.
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.
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.
<!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.
Save the above code in if-bind.htm file.
Open this HTML file in a browser.
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.
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.
Product details
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.
<!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.
Save the above code in if-container-less.htm file.
Open this HTML file in a browser.
Open this HTML file in a browser.
Monday
Tuesday
Wednesday
Thursday
Friday

    38 Lectures 
     2 hours 

 Skillbakerystudios
 Print
 Add Notes
 Bookmark this page