VisibleBindings

Demonstrates the use of visible bindings and the use of if binding

by Randy Crews

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<!-- using visible the elements visible state is managed through CSS -->
<h2>Visible Bindinging</h2>
<input type="checkbox" data-bind="checked: isVisible" /><span>Show the text</span>
<hr/>
<div data-bind="visible: isVisible">You decided to show this element
    <hr/>
</div>

<!-- using if the element is not added to the DOM until true -->
<h2>Using "if" binding</h2>
<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>
 
<div data-bind="if: displayMessage">Element added to DOM</div>

CSS

body {
    font-family:Arial;
}
.smallText {
    font-size: .8em;
    font-style: italic;
}
.containerWidth {
    width:50%;
}

JavaScript

function myviewmodel() {
    var self = this;
    self.isVisible = ko.observable(false);
    self.displayMessage = ko.observable(false);
};
ko.applyBindings(new myviewmodel());