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()值以"自动"开始,即使我们将其显式初始化为"手动".
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')