javascript - Asyncronous knockout observableArray select options loading -

i hava selectoptions ajax-based asincronous loader; accepts remote address , returns observable array, correctly populated descriptions , keyvalues accepted following binding

 <select data-bind="value: selectedval, options: opts, optionstext: 'desc', optionsvalue:'key', optionscaption: ''"/></div> 

the fact that, being asincronous, when trigger select options change, based on user actions, assign model observable array, not select popuated, remains empty.

 mymodel.opts = loadoptions("<remoteaddress>"); 

i know when second line called anwer not arrived yet, returned value observablearray, should respond correctly whenever populated, having been assigned observable array binded ui.

if hardcode returned object ajax call (when returns) taking console.log in firefox, or if pass observable array opts loadoptions, , change build opts inside it, works, need use loadoptions is, asincronous. tried append mymodel.opts.valuehasmutated(), yet ko cannot use newlly arrived observablearray.

if possible leaving intact options loader, , if possible without using custom binding, can use incoming observable array binding when ready?

the problem you've got when line runs:

mymodel.opts = loadoptions("<remoteaddress>"); 

it's replacing entire observable array different observablearray, rather updating current one. need update existing 1 - can change loadoptions return normal array, rather observable one? can do:

//clear existing entries mymodel.opts.removeall(); //push new entries in mymodel.opts.push.apply(mymodel.opts, loadoptions("<remoteaddress>"));