Knockout单击绑定到复选框可防止jQuery控制值

如果您在窗体上有一个复选框（使用Knockout将单击的功能绑定到该窗体上），它似乎会覆盖复选框状态的编程控制。Knockout单击绑定到复选框可防止jQuery控制值

有一个小提琴在这里展示的问题： 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中的框的值？

来源

2014-01-16 Matt Thrower

这是正确的小提琴吗？ – johnnycardy

不是。就是现在。 –

它在Chrome中适用于我。 – johnnycardy

按照这个其他计算器回答：

knockout event binding

，概括为：

允许的默认操作

默认情况下，淘汰赛将阻止事件采取任何默认的操作。例如，如果使用事件绑定来捕获输入标签的按键事件，浏览器将只会调用您的处理程序函数，并且不会将该键的值添加到输入元素的值中。一个更常见的例子是使用点击绑定，在内部使用这个绑定，你的处理函数将调用，但浏览器不会导航到链接的href。此是一个有用的默认设置，因为当您使用点击式绑定时，通常是因为您将链接用作UI的一部分，因此操纵您的视图模型，而不是作为常规超链接连接到另一个网页页面。

但是，如果您确实想让默认操作继续，只需从您的事件处理函数中返回即可。

所以默认是，除非你返回true，否则默认事件将被阻止。

如果您要控制的值是您想要控制的值，您可能会发现以下内容，有点长时间介意您和一个明确的黑客攻击，但它很有效。

安装在您的视图模型可观察到持有该复选框是否被选中或不

self.isChecked = ko.observable(false);

设置一个计算观察到你的虚拟机将用于绑定到复选框选中的值;

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

绑定计算在HTML checked属性：

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

更改失败的功能纳入，将立即执行失败函数完成后超时，并且在功能，设置的基本观察到器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然后更新observable并且计算被访问并且复选框显示被更新。

现在工作的原因远远超出了我对浏览器及其执行路径的了解，但我认为带有零超时值的setTimeout有效地添加了这段代码以便在当前之后立即运行（单击此例）功能，此链接进入一些细节：

Why is setTimeout(fn, 0) sometimes useful?

我不能工作了，为什么通过你原来的jQuery在超时函数试图尽管当不工作检查设置属性。

我希望这实际上帮助你莫名其妙！

来源

2014-01-16 15:09:46

精彩如此，谢谢 - 对问题的解释以及解释良好的解决方法。如果我可以两次投票赞成，我会。 –

谢谢马特，很高兴我能帮上忙。 –

Knockout单击绑定到复选框可防止jQuery控制值

回答

相关问题