Knockout click wiążące dziwne zachowanie

Question

Próbując zdobyć podstawową Knockout kliknięcie wiązaniami skonfigurować, jak na poniższym przykładzie:

<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/

jednak działa na dwie kwestie:

1. Wiązanie powoduje, że wartość mode() zaczyna się jako "automatyczna", nawet jeśli jawnie zainicjowaliśmy ją jako "ręczną".
2. Ilekroć kliknięciu przycisku, konsola JavaScript pokazuje:

Uncaught TypeError: h.apply is not a function

Answer 1

Trzeba owinąć kliknięcia teleskopowe w funkcji:

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> 

zobaczyć http://knockoutjs.com/documentation/click-binding.html

Answer 2

Problem polega na tym, że Twój click handler to wywołanie funkcji zamiast używania jej odwołania.

To dlatego kończy się mode jest auto, ponieważ click: $root.mode('automatic') ustawia wartość obserwowalne.

Spróbuj to zamiast:

click: $root.mode.bind($root, 'manual') 

Answer 3

Każda odpowiedź .bind lub function() {} odpowiedź będzie działać; ale generalnie wolę unikać definiowania funkcji w moich widokach, gdzie to możliwe, i zamiast tego przenieść tę logikę do ViewModel.

Inną opcją, z którą prawdopodobnie bym się przyłączył, jest zdefiniowanie funkcji viewModel.setToManual() i funkcji viewModel.setToAutomatic().

Następnie wiązanie handler będzie tylko

click: setToAutomatic 

Nie tylko jest to, że odkurzacz w widoku, ale chroni widok przed zmianami w strukturze ViewModel, jak również, o ile zachowanie setToAutomatic (i prawdopodobnie porównywalne isAutomatic) są zachowane.