I have an ajax-based asynchronous loader for select options. It accepts a remote address and returns an observable array that is correctly populated with descriptions and key values to be used in the following binding.
<select data-bind="value: selectedVal, options: opts, optionsText: 'desc', optionsValue:'key', optionsCaption: ''"/></div>
The issue I am facing is that when I trigger a change in the select options based on user actions and assign it to my model's observable array, the select remains empty because of its asynchronous nature.
mymodel.opts = loadOptions("<remoteaddress>");
Even though I understand that the answer has not arrived yet when the second line is called, the returned value is an observableArray and should populate correctly once it is filled, as it has been assigned to an observable array bound to the UI.
If I manually hardcode the object returned from the ajax call or pass the observable array opts into loadOptions and modify it to populate the opts internally, then it works. However, I need to use loadOptions as is, asynchronously. I have also tried using mymodel.opts.valueHasMutated(), but Knockout.js still cannot utilize the newly arrived observableArray.
If possible, without altering the options loader and without using a custom binding, how can I bind the incoming observable array once it is ready?