Knockoutjs复选框已更改事件

Min*_*ngo 4 javascript mvvm knockout-2.0 knockout.js

我有一些复选框绑定到我的模型中的数组.这非常有用,当您选中一个框时,数组会相应更新.

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

我已经在一个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);
});?
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

Joh*_*les 14

您不需要更改事件.如果您订阅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);
    });
}
Run Code Online (Sandbox Code Playgroud)