CODEWITHSUNDEEP
javascriptmvvmknockout.jsknockout-2.0
Mingo
Mingo

Reputation: 936

Knockoutjs checkbox changed event

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.

For completeness my code is repeated here.

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>

Upvotes: 6

Views: 14252

Answers (2)

John Earles
John Earles

Reputation: 7194

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/

function SizeModel() {
    var self = this;
    self.sizes = ko.observableArray(["3", "2", "1"]);
    self.sizes.subscribe(function(updated) {
        alert(updated);
    });
}

Upvotes: 14

Tomasz Zieliński
Tomasz Zieliński

Reputation: 16356

In your fiddle you're missing commas in your data-bind-s, here's a fixed example: http://jsfiddle.net/4aau4/1/

Re the problem - it might be either a KnockoutJS-related problem (i.e. it updates the observableArray after the change event is fired), or something similar to what I stucked on some time ago: Checkboxes are being checked before click handler is even called

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.observableArray that lags behind. ($('input:checked').length says how many checkboxes are actualy checked).

Upvotes: 0

Related Questions