Toggling visibility with knockout

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div class='eg'>   
    <input type='checkbox' data-bind="checked: testTrue" />
    <br />
    <div data-bind="text: testTrue"></div>
    <div data-bind="visible: testTrue">true</div>
    <div data-bind="visible: !testTrue">false</div>    
</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() {
    return ko.observable({
        testTrue: true,
    });
};

ko.applyBindings(new ViewModel());