javascript - Knockout checkbox not updating visually -

javascript - Knockout checkbox not updating visually -

i'm having issue checkbox input in knockout code updates viewmodel correctly, not update until div surrounding disappears , re-appears. we're using knockout 3.2.0, currently.

here's subset of relevant html:

<!-- ko foreach: objects --> <!-- ko if: istype(typecodes.input) --> <!-- ko if: selected --> <div data-bind="fadevisible: $root.isstate(uistate.idle)" id="typeinputcontainer"> <!-- ko foreach: $root.types --> <div class="checkbox patienttype"> <input type="checkbox" data-bind="attr: {id: 'checkpt' + $data.patienttypevalue() }, checked: $data.visible" /> </div> <!-- /ko --> </div> <!-- /ko --> <!-- /ko --> <!-- /ko -->

and here's subset of viewmodel:

function patienttype(name, value, color) { var self = this; self.typename = ko.observable(name); self.visible = ko.observable(true); //disposal self.isdisposed = false; self.dispose = function() { self.color().dispose(); self.isdisposed = true; }; }

apologies drastic reduction, surrounding code in each case highly verbose , not particularly related problem.

when step through code @ highest level on phone call stack, jquery function event handling (below), clicking checkbox cause called around 5 or 6 times, , @ each point after first, checkbox has changed correctly reflect updated viewmodel.

however, after "thread" of execution has finished, checkbox reverts previous state. when div removed (by deselecting object referenced @ top line of html) , re-added (by re-selecting it) checkbox correctly reflect viewmodel.

initially, thought ui alter halted number of subscriptions assigned various changes caused update in viewmodel, found problem persisted when these subscriptions temporarily removed. there other checkboxes within application function intended , written in much same way.

the jquery 2.1.1 code mentioned above:

eventhandle = elemdata.handle = function( e ) { // discard sec event of jquery.event.trigger() , // when event called after page has unloaded homecoming typeof jquery !== strundefined && jquery.event.triggered !== e.type ? jquery.event.dispatch.apply( elem, arguments ) : undefined; };

and definition of fadevisible binding, in case it's relevant:

ko.bindinghandlers.fadevisible = { init: function (element, valueaccessor) { // set element instantly visible/hidden depending on value var value = valueaccessor(); $(element).toggle(ko.unwrap(value)); // utilize "unwrapobservable" can handle values may or may not observable }, update: function (element, valueaccessor) { // whenever value subsequently changes, fade element in or out var value = valueaccessor(); ko.unwrap(value) ? $(element).fadein() : $(element).fadeout(); } };

any suggestions on causing much appreciated.

don't know relevant, experienced issue radio button unselected after rebinding. fixed 1 time replaced data-bind="if: data-bind="visible:

javascript jquery checkbox knockout.js