Knockout點擊綁定奇怪的行為

Question

嘗試獲取基本的Knockout點擊綁定設置，如下例所示：

<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);

});

小提琴： http ： //jsfiddle.net/aq85wk65/

但是，遇到兩個問題：

1. 綁定導致mode()值以'automatic'開頭，即使我們將其顯式初始化為'manual'。
2. 只要單擊一個按鈕，javascript控制台就會顯示：

未捕獲的TypeError：h.apply不是函數

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 ）的行為setToAutomatic 。