title: Async AJAX call with lookup data using ko observableArray?
body: <p>I have an observableArray of options that gets bound to the following: </p>
  
  <pre><code>&lt;select data-bind="options: lookupData.options, optionsText: 'DisplayName', optionsValue: 'Id', value: optionId" /&gt;
  </code></pre>
  
  <p>When I first apply bindings, the <code>options()</code> observable array is empty - an async AJAX call is sent to retrieve these options.  </p>
  
  <p>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.  </p>
  
  <p>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.  </p>
  
  <p>Am I missing some syntax to make this work?</p>
  
  <p>Code: </p>
  
  <pre><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);
  </code></pre>