javascript - knockout 单击绑定(bind)到复选框可防止 jQuery 对值的控制

Question

如果表单上有一个复选框，并且使用 Knockout 将单击时的函数绑定(bind)到该复选框，则它似乎会覆盖复选框状态的编程控制。

这里有一个 fiddle 演示了这个问题: http://jsfiddle.net/Y5Zk8/

代码:

<input type="checkbox" id="thisFails" data-bind="click: $root.Fails" />
<label for="thisFails">This Fails</label>

var SimpleModel = function() {
        this.Fails = function() {
         alert('clicked');
         $('#thisFails').attr('checked', true);
    }
};

ko.applyBindings(new SimpleModel());

现在，我很清楚，如果我从函数中返回 true 或 false，它就会起作用。但想象一下我不能这样做(这是有原因的——很复杂)。为什么我无法控制 JQuery 中框的值？

Answer 1

根据其他 stackoverflow 答案:

knockout event binding

总结为:

Allowing the default action

By default, Knockout will prevent the event from taking any default action. For example if you use the event binding to capture the keypress event of an input tag, the browser will only call your handler function and will not add the value of the key to the input element’s value. A more common example is using the click binding, which internally uses this binding, where your handler function will be called, but the browser will not navigate to the link’s href. This is a useful default because when you use the click binding, it’s normally because you’re using the link as part of a UI that manipulates your view model, not as a regular hyperlink to another web page.

However, if you do want to let the default action proceed, just return true from your event handler function.

因此默认情况是，除非返回 true，否则默认事件将被阻止。

如果你想控制它的检查值，你可以执行以下操作，请注意，这有点啰嗦，而且是一个明确的技巧，但它确实有效。

在 View 模型上设置一个可观察对象来保存复选框是否被选中

self.isChecked = ko.observable(false);

在虚拟机上设置一个计算的可观察量，用于绑定(bind)到复选框选中的值；

self.isCheckedCp = ko.computed(function(){
    return self.isChecked();
});

将计算值绑定(bind)到html中的checked属性:

<input type="checkbox" id="thisFails" data-bind="click: $root.Fails,checked:isCheckedCp" />

更改 Fails 函数以合并将在失败函数完成后立即运行的超时，并在该函数中设置底层 isChecked 可观察值的值(在示例中它只是切换当前值)

 self.Fails = function(e) {
        console.log('e',e.isChecked());
     alert('arse');
        console.log( $('#thisFails'));
    setTimeout(function(){
        console.log('set now');
        //this works
        self.isChecked(!self.isChecked());

        //still doesn't work with the set timeout 
        $('#thisFails').attr('checked', true);
        console.log('e',e.isChecked());
    }, 0);

}

如果你单步执行它，你会看到它何时到达 setTimeout console.log('set now');该复选框已恢复为您单击它时的状态。

设置 self.isChecked 然后更新可观察值，访问计算值并更新复选框显示。

现在起作用的原因远远超出了我对浏览器及其执行路径的了解，但我认为具有零超时值的 setTimeout 有效地添加了这段代码以在当前之后立即运行(在本例中单击)函数，此链接详细介绍:

Why is setTimeout(fn, 0) sometimes useful?

我不明白为什么在超时函数中尝试时通过原始 jquery 设置检查属性不起作用。

我希望这实际上对您有所帮助!