Async AJAX call with lookup data using ko observableArray? - ajax

Question

I have an observableArray of options that gets bound to the following:
<select data-bind="options: lookupData.options, optionsText: 'DisplayName', optionsValue: 'Id', value: optionId" />
When I first apply bindings, the options() observable array is empty - an async AJAX call is sent to retrieve these options.
Most of the time, this works perfectly. But if I display the view very quickly, before the AJAX call returns, the dropdown displays with a default option selected, but the options become available. The selected option isn't updated though.
In other words - if I have 'Blue' as the currently selected option, but the select markup is displayed before the AJAX call completes, 'Blue' doesn't get selected after the observableArray of options is populated.
Am I missing some syntax to make this work?
Code:
// getLookupData()
var lookupData = {};
lookupData.colors = ko.observableArray();
$.ajax({
type: "POST",
url: getAllergyRelationshipListUrl.url,
async: true,
data: new Object(),
dataType: "json",
contentType: "application/json"
}).done(function(data, textStatus, jqXhr) {
lookupData.colors(data.Data);
});
return lookupData;
// colorVm
if (vm.colorLookupData == null) {
vm.colorLookupData = getLookupData();
}
ko.applyBindings(vm);

Answer 1

It's a known problem on knockout select. Before your ajax finishes, the value does not exist in options, the options binding enforced your value to be one of options.
This is solved in knockout since version 3.1 with introduction of valueAllowUnset.
Update your binding to:
<select data-bind="valueAllowUnset: true, options: lookupData.options, optionsText: 'DisplayName', optionsValue: 'Id', value: optionId" />
You can read here http://knockoutjs.com/documentation/value-binding.html#using-valueallowunset-with-select-elements