KnockoutJS – Visible Binding

As the name specifies this binding makes the related DOM element to be visible or hidden based on the value passed in the binding.

Syntax

visible: <binding-condition>

Parameters

When the parameter transforms into false (like false/0/null/undefined), then the binding sets display:none for the element to making it as hidden.

When the parameter transforms into true (true/non-null/array ), the binding removes the element’s display value and makes it visible.

Example

<html>
<head>
<title>KnockoutJS Computed Observables</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.2.js"></script>

</head>
<body>
<a href="#" data-bind="click: toggleVisibility">Show/Hide Text</a>
<br/><br />
<div data-bind="visible: shouldShowMessage">
Welcome To Dotnet-helpers.com Learning Curve
</div>

<script type="text/javascript">
var viewModel = function () {
this.shouldShowMessage = ko.observable(true);
this.toggleVisibility = function () {

this.shouldShowMessage(!this.shouldShowMessage());
alert('shouldShowMessage status ' + this.shouldShowMessage());
};

};
ko.applyBindings(new viewModel());
</script>

</body>
</html>

<html>

<head>

<title>KnockoutJS Computed Observables</title>

</head>

<body>

Welcome To Dotnet-helpers.com Learning Curve

</div>

var viewModel = function () {

this.shouldShowMessage = ko.observable(true);

this.toggleVisibility = function () {

this.shouldShowMessage(!this.shouldShowMessage());

alert('shouldShowMessage status ' + this.shouldShowMessage());

};

ko.applyBindings(new viewModel());

</script>

</body>

</html>

OUTPUT

What do you think?

I hope you have idea of how to use KnockoutJS visible or hidden based on the value passed in the binding. I would like to have feedback from my posts readers. Your valuable feedback, question, or comments about this article are always welcome.

KnockoutJS – Visible Binding