Javascript 击倒点击绑定奇怪的行为

尝试获得基本的击倒点击绑定设置，如下例所示：

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

});

手册
自动的
模式：
$（函数（）{
var TestModel=function（）{
var self=这个；
this.mode=ko.observable（“手动”）；
};
var testModel=新的testModel（）；
window.testModel=testModel；
应用绑定（testModel）；
});

小提琴：

但是，遇到了两个问题：

绑定导致

mode（）

值以 “自动”，即使我们显式地将其初始化为“手动”

无论何时单击按钮，javascript控制台都会显示：

未捕获类型错误：h.apply不是函数

---

您需要在函数中包装单击处理程序：

手册

---

请参见

问题在于，

单击

处理程序正在调用函数，而不是使用其引用

这就是为什么你的

mode

是

auto

，因为

click:$root.mode（'automatic'）

正在设置可观察的值

请尝试以下方法：

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

---

.bind

应答或

函数（）{}

应答都可以工作；但通常我宁愿尽可能避免在视图中定义函数，而是将该逻辑移到ViewModel中

因此，另一个选项，在本例中我可能会使用的选项是定义一个

viewModel.setToManual（）

函数和一个

viewModel.setToAutomatic（）

函数

那么绑定处理程序就是

click: setToAutomatic

---

不仅视图更干净，而且它还保护视图不受视图模型结构变化的影响，只要

设置为自动

（可能还有一个类似的

是自动的

）的行为被保留下来。

通常我完全同意你的意见，但在这种情况下，他正在从控件设置一个可观察的值。如果他有几个选项，那么为每个选项定义一个唯一的setter就有点过分了。

click: setToAutomatic