Нокаут нажмите связывание странного поведения

Question

Попытки получить базовый Нокаут нажмите связывание установить, согласно примеру ниже:

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

Однако, бег на два вопрос:

1. Привязка приводит к тому, что значение mode() начинается с «автоматический», хотя мы явно инициализируем его «вручную».
2. Всякий раз, когда кнопка нажата, то Консоль JavaScript показывает:

Uncaught TypeError: h.apply is not a function

Answer 1

Вам нужно обернуть обработчики кликов в функции:

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> 

см http://knockoutjs.com/documentation/click-binding.html

Answer 2

Проблема в том, что ваш click обработчик , вызывающий функцию вместо использования ссылки.

Вот почему вы заканчиваете mode тем, что auto, потому что click: $root.mode('automatic') устанавливает наблюдаемое значение.

Попробуйте вместо этого:

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

Answer 3

.bind Либо ответ или function() {} ответ будет работать; но обычно я предпочитаю избегать определения функций в своих представлениях, где это возможно, и вместо этого переместить эту логику в ViewModel.

Итак, еще один вариант, и тот, с которым я, вероятно, поеду в этом случае, должен определить функцию viewModel.setToManual() и функцию viewModel.setToAutomatic().

Тогда связывающий обработчик будет просто

click: setToAutomatic 

не только в том, что чище с точки зрения, но она защищает представление от изменений в структуре ViewModel, а также, до тех пор, как поведение setToAutomatic (и вероятно, сопоставимые isAutomatic).