Working with Knockout.js Part 5: Working with visible Binding

So far we have learnt about different aspects of ViewModel creation in Knockout.js. We learnt and discussed about MVVM, Observable, and Observable Array etc. In this post we will dig into various bindings’ capability of Knockout.js.

In simpler terms we can define Knockoutjs binding as a mechanism to establish relationship between view and ViewModel. View takes user action and pass the instruction to ViewModel. One of the most popular example of this could be clicking on a button or selection of an item on the View by user. After each action of user, view got the task to instruct ViewModel about the same. This is done through the BINDING. On the other hand we can define binding as manipulating DOM elements and their appearance on the basis of ViewModel properties. This can be also done through the BINDING again. Binding establish the relationship between View and ViewModel.

Knockoutjs binding can be categorised in different categories. We can say that there could binding could be to manage flow of data and DOM elements. There could be binding to manage display and style of DOM elements. There could be binding for user actions like click and touch. There could be binding to handle flow of data from Model to View.

In this post we will focus on working with visible binding. As name suggests visible binding decides whether a DOM element will be visible or not on the basis of ViewModel property value.

Assume you have div .You can apply visible binding to div as following

And a simple ViewModel can be as follows,

Some points about visible binding is worth discussing here, If value of ViewModel property will resolved to following values then bind DOM element view property will be set to block.

Null
undefined
number zero
Boolean false

For DOM elements if ViewModel property value is yielding to false then visible binding will always have more priority than CSS attributes.

Now to understand view binding in better way let us create two buttons. On click of one button div will be visible and on click of another button div visibility would be false. If you notice in ViewModel creation we have created property of ViewModel as observable property. Hence whenever value of this property will change, it will notify the View.

Let us assume we have HTML with one div and two buttons as following,

<body>
 <div data-bind="visible:displayViewDiv">
 <h2>This div will be visible and hidden thrugh visible binding </h2>
 </div>

<div>
 <button id="btnshowdiv" >Click to show Div</button>
 <button id="btnhidediv" >Click to hide Div</button>
 </div>
 <script>
 ko.applyBindings(divdispalyViewModel);
 </script>
</body>

We will create ViewModel with observable property .This property is bind with visible property of DOM element div. So ViewModel is created as follows,


var divdispalyViewModel = {

displayViewDiv: ko.observable(true)
 };

Now on click event of buttons we will set value of ViewModel property. Since property is an observable property hence it will notify view on value changed and view will get refresh automatically.


$(document).ready(function () {

 $('#btnshowdiv').click(function () {

divdispalyViewModel.displayViewDiv(true);
 });
 $('#btnhidediv').click(function () {

divdispalyViewModel.displayViewDiv(false);
 });

});

You will notice that Div is visible and hidden on clicking of buttons. We are handing div visibility using visible binding of Knockoutjs.

In this post we started with the discussion of binding. In further posts we will learn about other bindings as well. I hope you find this post useful. Thanks for reading.

Filed under: JavaScript