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>
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.