javascript - Breeze/Knockout dropdown causing entity to be modified -

this bit of odd issue came across today. have application using breeze , knockout. on 1 of pages allow user edit , save project data. save button enabled if change has been made. track changes subscribe propertychanged event. page has quite few dropdowns causing problems. here example of 1 of dropdowns.

<div>     <label for="projqamanager">qa manager</label>     <select id="projqamanager" data-bind="options: qamanagers,                                           optionstext: 'fullname',                                           optionsvalue: 'username',                                           optionscaption: 'none',                                           value: project().qamanager"></select> </div> 

the issue occurs when project().qamanager "". propertychanged event gets fired project loaded , shows qamanager field being changed "" null. causing entity believe has been modified though nothing has changed. if qamanager null works fine. suppose go through , try , clean db , clear out fields "" , set them null if had rather not if can avoided.

the problem lies indeed fact knockoutjs assigns value undefined caption of list box, labelled "none".

what happens right after listbox populated, knockoutjs checks if selected value (project().qamanager) matches of options listed in list box. if not match, selects option caption, , such, selected value of listbox modified, triggers project().qamanager undefined value.

excerpt documentation of options binding handler (emphasis mine):

ko prefix list of items 1 displays text [caption text] , has value undefined. so, if mychosenvalue holds value undefined (which observables default), dummy option selected. if optionscaption parameter observable, text of initial item update observable’s value changes.

i thought of following workarounds ranging easiest hardest, "proper":

1. one of workaround add list of options (qamanagers) entry has value undefined, before available observable array.

2. write custom binding handler options allows set given value caption item, instead of being set undefined. should consist in copy/pasting 99% of knockoutjs's implementation of "options", , changing code wrote @ option 3.

3. change knockoutjs's source new "optionscaptionvalue" binding taken account, (i've modified original code should do):

       if (allbindings['optionscaption']) {         var option = document.createelement("option");         ko.utils.sethtml(option, allbindings['optionscaption']);          var captionsvalue;         if (allbindings['optionscaptionvalue']) {            captionsvalue = ko.utils.unwrapobservable(allbindings['optionscaptionvalue']);         }         ko.selectextensions.writevalue(option, captionsvalue ? captionsvalue : undefined);         element.appendchild(option);     }