KnockoutJS Visible Binding

In this article and some of our upcoming articles we shall study different types of bindings that KnockoutJS supports. We shall start with KnockoutJS visible binding in this article. Basically visible binding makes the associated DOM element visible or hidden depending upon the value set in it.

It is best to explain KnockoutJS visible binding with the help of an example. Take a look at the following piece of code. The code is explained in the section that follows.

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

<body>
    
<div data-bind="visible: StudentName">
    This text will only be visible if StudentName of the StudentModel holds true-like value.
</div>
 
   <script>

   function StudentModel() {
       this.StudentName = ko.observable(true);
   }

   ko.applyBindings(new StudentModel());
         
   </script>
    
</body>
</html>

Download the code Try the code

In the above code we have a div with some random text. KnockoutJS visible binding is used to set the hide or display property of the div via “StudentName” attribute of the StudentMode of the JavaScript. By default, the StudentName is set set as observable with value true. Therefore the div is visible by default. However, if you change the value of the StudentName observable to false, you shall see that the div shall not appear.

How KnockoutJS Visible Binding Works

Basically visible binding sets the element.style.display property to none if it contains some false-like value which can be false, a value less than zero etc. Similarly, setting visible to true-like value e.g true or something greater than 0 removes style.display.none from the element thus making it visible.

Apart from passing true-like or false-like values for visible bindings, you can also use functions and expressions directly with visible binding. For instance in the following example we have an array inside the StudentModel with zero items. Next we add one item into this array. In the HTML view, the visible binding is assigned the result of the expression that checks if the items in the array are greater than zero, which in our case is true. Therefore the text in the div will be visible. However, if there were no items in the array, the div text would have been hidden. Take a look at the code.

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

<body>
    
<div data-bind="visible: StudentMarks().length > 0">
    This text will only be visible if StudentName of the StudentModel holds true-like value.
</div>
 
   <script>

   function StudentModel() {
       this.StudentMarks = ko.observableArray([]);
   }
       StudentModel.StudentMarks.push("some value");
   ko.applyBindings(new StudentModel());
         
   </script>
    
</body>
</html>

Download the code Try the code

In the next article we shall see other binding types. Keep visiting this site! Happy coding!

<<< KnockoutJS Computed ObservableKnockoutJS Text & HTML Bindings >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .