Knockoutjs 复选框更改事件答案

【问题标题】：Knockoutjs checkbox changed eventKnockoutjs 复选框更改事件
【发布时间】：2012-06-26 00:19:49
【问题描述】：

我有一些复选框绑定到我的模型中的数组。这很好用，当您选中一个框时，数组会相应更新。

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

我在 jsfiddle http://jsfiddle.net/LpKSe/ 中说明了我的问题，这可能更有意义。

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

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>

【问题讨论】：

标签： javascript mvvm knockout.js knockout-2.0

【解决方案1】：

您不需要更改事件。如果您订阅 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);
    });
}

【讨论】：

【解决方案2】：

在您的小提琴中，您的data-bind-s 中缺少逗号，这是一个固定示例：http://jsfiddle.net/4aau4/1/

是问题所在 - 它可能是与 KnockoutJS 相关的问题（即它在 change 事件触发后更新 observableArray），或者类似于我前段时间坚持的问题：Checkboxes are being checked before click handler is even called

编辑：

多么艰难的星期天，我想我还没醒:)

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

【讨论】：