Strange Issue with Knockout...or is it?

by Sean Killeen

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<div class="container">
    <div class="row">
        <div class="btn-group">
            <button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement()">A</abbr>

            </button>
        </div>
    </div>
    <div class="row" data-bind="visible: AddingAnnouncement() == true">
        	<h1>Add a new announcement</h1>

    </div>
</div>

JavaScript

var MyNamespace = MyNamespace || {

    ViewModel: function () {
        'use strict';
        var self = this;

        self.AddingAnnouncement = ko.observable(false);

        self.AddAnnouncement = function () {
            console.log("executing AddAnnouncement");
            self.AddingAnnouncement(true);
        };

        self.Start = function () {
            console.log("ViewModel starting");
            console.log("Self.AddingAnnouncement was: " + self.AddingAnnouncement());
            self.AddingAnnouncement(false);
            console.log("Self.AddingAnnouncement is now: " + self.AddingAnnouncement());
        };

        self.Start();
    }
};

var vm;

$(document).ready(function () {
    'use strict';

    vm = new MyNamespace.ViewModel();

    ko.applyBindings(vm);
});