Introduction:

In this article we will learn how to use Visible binding in KnockoutJS or what is Visible binding in KnockoutJS or why use Visible binding in KnockoutJS with example.

  • Description:

knockoutJS Visible binding basically used to show or hide an element.Visible binding are particularly helpful when you want to show or hide an element depending on condition.

Let’s see a simple example of knockoutJS Visible binding.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KnockoutJSCSSBinding.aspx.cs"
 
Inherits="AspDotNet.KnockoutJS_CSS_Bindings" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/knockout-3.4.2.js"></script>
 
    <style>
      .eligible {
      color: red;
      font-weight: bold;
      }
   </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    Check Your Age :<input type="text" data-bind="value: Age" />
        <div data-bind="visible: Age() < 18">
              <div data-bind="css: { eligible:Age() < 18 }">
               your age is not eligible for vote.
               </div>
         </div>
 
   <script>
       function VoteModel() {
           this.Age = ko.observable(0);
       }
       var vm = new VoteModel();
       ko.applyBindings(vm);
   </script>
    </div>
    </form>
</body>
</html>


Output:


How to use Visible binding in KnockoutJS


In the above code we have a div with some message text. KnockoutJS visible binding is used to set the hide or display property of the div via “Age” attribute of the voteMode of the JavaScript. If you entered the value in text box less than 18 then  message div shall display but if you entered greater than 18 then message  div shall not appear.

 

 I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like