Toggling visibility with knockout

by Valerie Ren

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div class='eg'>   
    <a href="#" data-bind="click: toggleVisibility">Toggle</a>
    <br />
    <table>
        <tr data-bind="visible: showRow"><td>Some Text</td></tr>
    </table>
</div>

CSS

body { font-family: arial; font-size: 14px; }
.eg { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }

JavaScript

var ViewModel = function() {
    var self = this;
    self.showRow = ko.observable(false);
    self.toggleVisibility = function() {

        self.showRow(!self.showRow());
        alert('showRow is now ' + self.showRow());
    };
};

ko.applyBindings(new ViewModel());