Knockout click binding strange behavior

Question

Trying to get basic Knockout click binding set up, as per the example below:

<button id="btn-a" class="btn" data-bind="css: {'btn-primary':mode() == 'manual'}, click: $root.mode('manual')">Manual</button>
<button id="btn-b"  class="btn" data-bind="css: {'btn-primary':mode() == 'automatic'}, click: $root.mode('automatic')">Automatic</button>

<label>MODE: </label><span data-bind="text:mode()"></span>  

<script>

$(function () {

    var TestModel = function() {        
        var self = this;
        this.mode = ko.observable('manual');
    };

    var testModel = new TestModel();
    window.testModel = testModel;
    ko.applyBindings(testModel);

});

Fiddle: http://jsfiddle.net/aq85wk65/

However, running into two issues:

1. The binding causes the mode() value to start out as 'automatic', even though we explicitly initialize it to 'manual'.
2. Whenever a button is clicked, the javascript console shows:

Uncaught TypeError: h.apply is not a function

Answer 1

You need to wrap your click handlers in function:

http://jsfiddle.net/aq85wk65/1/

<button id="btn-a" class="btn" data-bind="css: {'btn-primary':mode() == 'manual'}, click: function(){$root.mode('manual')}">Manual</button>

see http://knockoutjs.com/documentation/click-binding.html