jquery - Knockout JS Checkbox binding -


i having issue checkbox binding , computed observable while jquery in page.

self.guaranteed = ko.computed(function() {     var result;     result = self.isguaranteed() && (self.isallowed() || self.isallowed2());     console.log("evaluated");     if (result) {         self.isguaranteed(false);     }     return result; }, self); 

jsfiddle of runnable code

so expected behavior when don't include jquery in page, when jquery on page, dependencies not correctly registered in computed observable , guaranteed checkbox never uncheck when condition met. conditional text may or may not show up, depending on if computed recalculates. can't rid of jquery form page unfortunately, other ideas?

edit:

this same example above expected behavior, no jquery loaded: working jfiddle

also, here lines in knockout resetting checkbox back:

// click events on checkboxes, jquery interferes event handling in awkward way: // toggles element checked state *after* click event handlers run, whereas native // click events toggle checked state *before* event handler. // fix intecepting handler , applying correct checkedness before runs. var originalhandler = handler; handler = function(event, eventdata) {     var jquerysuppliedcheckedstate = this.checked;     if (eventdata)         this.checked = eventdata.checkedstatebeforeevent !== true;     originalhandler.call(this, event);     this.checked = jquerysuppliedcheckedstate; // restore state jquery applied }; 

i'm not quite sure why getting "correct" behavior considering pattern, within computed, needs special consideration. problem modifying computed dependency self.isguaranteed inside computed. see note: why circular dependencies aren’t meaningful. if 'must' use setup, take consideration advice within link of using peek.

this may simplified example of more complex setup, if desired functionality prevent guaranteed being selected, why not disable element?

model

self.isguaranteeable = ko.computed(function(){              return  !(self.isallowed() || self.isallowed2());   }); 

html

<input data-bind="checked: isguaranteed, enable: isguaranteeable"   id="isguaranteed" name="isguaranteed" type="checkbox" value="true"> <span>guaranteed</span>  

explanation

have @ example debug capabilities added.

case 1: select either allowed , select guaranteed. next click print isguaranteed observable value.

[09:45:00.623] computing (computed) [09:45:00.623] isguaranteed: (assigning) false [09:45:00.623] isguaranteed: (assigning) true [09:45:38.430] actual value: false 

when entered computed value of isguaranteed being set true. encountered state trying prevent , set observable false. problem however, "knockout not restart evaluation of computed while evaluating". span rendered on "first" pass of computed , reassignment of computed dependency did not trigger re-evaluation. thus, text stays on screen. interrupted original value setting of true resolves last leaving checkbox selected actual value behind scenes false.

case 2: select guaranteed, either allowed followed print of actual value.

[09:58:01.367] computing (computed) [09:58:01.367] isguaranteed: (assigning) true [09:58:02.199] computing (computed) [09:58:02.199] isguaranteed: (assigning) false [09:58:03.054] actual value: false 

the first selection triggers appropriately. selection of allowed forces computed evaluate , "bad" state triggers reassignment of isguaranteed. since value not original trigger of computed, assigns value correctly, however, backend in state should hide warning text did not due circular dependency.


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -