Knockoutjs复选框改变事件

Question

我有一些复选框与我的模型中的一个数组绑定。当你勾选一个复选框时，数组会相应地更新，这运作得非常好。

但是当值发生变化后，我希望调用我的模型上的一个方法来根据新值过滤结果。我已经尝试连接更改事件，但这似乎具有更改之前而不是之后的值。

我在jsfiddle中演示了我的问题：http://jsfiddle.net/LpKSe/ 这可能更容易理解。

为了完整起见，这里重复了我的代码。

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

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

- Mingo

Answer 1

你不需要使用change事件。如果你订阅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);
    });
}

- John Earles

Answer 2

在你的fiddle中，你的中缺少逗号，这里有一个修复的例子：http://jsfiddle.net/4aau4/1/ 关于问题 - 这可能是一个KnockoutJS相关的问题（即它在触发事件后更新observableArray），或者类似于我之前遇到的问题：在调用处理程序之前复选框已被选中 编辑：

真是个艰难的星期天，我想我还没有醒来 :)

看一下这个片段：http://jsfiddle.net/4aau4/2/ - 看起来DOM已经正确更新了，而是ko.observableArray落后了。（$('input:checked').length表示实际选中了多少个复选框）。

- Tomasz Zieliński