javascript Knockoutjs 复选框已更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11177565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockoutjs checkbox changed event
提问by Mingo
I have some checkboxes bound to an array in my model. This works great, when you check a box the array is updated accordingly.
我有一些复选框绑定到我的模型中的数组。这很好用，当您选中一个框时，数组会相应地更新。
However when the value has changed i wish to call a method on my model to filter the results given the new values. I have tried hooking up the change event but this seems to have the values prior to the change rather than after the change.
但是，当值发生变化时，我希望在我的模型上调用一个方法来过滤给定新值的结果。我尝试连接更改事件，但这似乎具有更改之前而不是更改之后的值。
I have illustrated my issue in a jsfiddle http://jsfiddle.net/LpKSe/which might make this make more sense.
我已经在 jsfiddle http://jsfiddle.net/LpKSe/ 中说明了我的问题，这可能会使这更有意义。
For completeness my code is repeated here.
为了完整起见，这里重复了我的代码。
JS
JS
function SizeModel() {
var self = this;
self.sizes = ko.observableArray(["small", "medium", "large"]);
self.sizes2 = ko.observableArray(["small", "medium", "large"]);
self.getResults = function(e) {
alert(self.sizes());
};
self.getResults2 = function(e) {
alert(self.sizes2());
};
}
$(document).ready(function() {
sizeModel = new SizeModel();
ko.applyBindings(sizeModel);
});?
Html
html
<h3>Size
<input type="checkbox" value="small" data-bind=" checked: sizes, event:{change: getResults}"/>
<span class='headertext'>Small</span>
<input type="checkbox" value="medium" data-bind=" checked: sizes, event:{change: getResults}" />
<span class='headertext'>Medium</span>
<input type="checkbox" value="large" data-bind=" checked: sizes, event:{change: getResults}" />
<span class='headertext'>Large</span>
</h3>
<h3>Size
<input type="checkbox" value="small" data-bind=" checked: sizes2, event:{click: getResults2}"/>
<span class='headertext'>Small</span>
<input type="checkbox" value="medium" data-bind=" checked: sizes2, event:{click: getResults2}" />
<span class='headertext'>Medium</span>
<input type="checkbox" value="large" data-bind=" checked: sizes2, event:{click: getResults2}" />
<span class='headertext'>Large</span>
</h3>
回答by John Earles
You don't need the change event. If you subscribe to the observableArray you will be notified when it changes, and be passed the updated array: http://jsfiddle.net/jearles/LpKSe/53/
您不需要更改事件。如果你订阅了 observableArray 你会在它改变时收到通知，并传递更新的数组：http: //jsfiddle.net/jearles/LpKSe/53/
function SizeModel() {
var self = this;
self.sizes = ko.observableArray(["3", "2", "1"]);
self.sizes.subscribe(function(updated) {
alert(updated);
});
}
回答by Tomasz Zieliński
In your fiddle you're missing commas in your data-bind-s, here's a fixed example: http://jsfiddle.net/4aau4/1/
在您的小提琴中，您的data-bind-s 中缺少逗号，这是一个固定示例：http: //jsfiddle.net/4aau4/1/
Re the problem - it might be either a KnockoutJS-related problem (i.e. it updates the observableArray after the changeevent is fired), or something similar to what I stucked on some time ago: Checkboxes are being checked before click handler is even called
重新问题 - 它可能是与 KnockoutJS 相关的问题（即它在change事件触发后更新 observableArray ），或者类似于我前一段时间坚持的问题：在单击处理程序被调用之前检查复选框
EDIT:
编辑：
What a tough Sunday, I think I'm still not awake :)
多么艰难的星期天，我想我还没醒:)
Take a look at this snippet: http://jsfiddle.net/4aau4/2/- it looks like DOM is properly updated and it's ko.observableArraythat lags behind. ($('input:checked').lengthsays how many checkboxes are actualy checked).
看看这个片段：http: //jsfiddle.net/4aau4/2/- 看起来 DOM 已正确更新，但它ko.observableArray落后了。（$('input:checked').length表示实际检查了多少个复选框）。
