Knockoutjs checked binding

I am having problems with the checked binding: clicking on this flag does not update the visible state, although the dependent value of Observable indicates that the value has changed.

Here is the HTML snippet:

 <input type="checkbox" data-bind="checked: document().selected" title="Select one or more documents to find more similar ones" > 

This is due to an instance of my Posting class that has an observable document() . The relevant part of the document class is as follows:

 function Document(data, topic) { this.id = ko.observable(data.id); this.url = ko.observable(data.url); this.title = ko.observable(data.title); /** Display state **/ this.selected = ko.observable(false); ko.dependentObservable(function() { console.log("Selected " + this.url() + " : " + this.selected()); }, this); } 

When I click on this checkbox, the console prints something like this:

 Selected http://somedomain.com/doc1.pdf : true 

but the checkbox is not selected.

I am using jQuery 1.4.2 and knockout 1.2.1

Other aspects of the knockout seem to work correctly. When I isolated the problem in jsffiddle like this , it worked as expected. Any thoughts on what I should check next?

Gene

UPDATE: December 12, 2011 2:54 AM PST:

@RP Niemeyer: I have many other instances of dependentObservable ; the only thing that matters is selected() looks like this:

 this.selectedDocuments = ko.dependentObservable( function() { return this.documents().findAll(function(doc) {return doc.selected()}); }, this); 

findAll does what you think it does.

As far as I can tell, what happens is that the observed selected value is set to true when the checkbox fires, which launches the dependent Observable value, which prints the correct value. However, the view is not updated. However, the observable believes that it is set to true because subsequent clicks on the same (unchecked) checkbox give no additional console output.

UPDATE Dec 12, 2011, 21:45 PST:

I was able to reproduce the problem in this jsfiddle . If you edit the click handler on the included div, the checkboxes work correctly. Is there a workaround, or is this a known issue?

+3
source share
1 answer

OK - with updates this makes sense. What you can do is return true; from the click handler that is on the external div. This will continue the default action.

http://jsfiddle.net/rniemeyer/SbuEV/8/

+4
source share

All Articles