title: In Knockout, how can I delay databinding until an array is populated?
body: <p>I've run into this pattern several times now and haven't found an elegant way to handle it. I'm trying to set up a page with a read-only and edit mode. </p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span data-bind="text: EventType, if: !EditMode()"&gt;&lt;/span&gt;
      &lt;select data-bind="options: $root.EventTypes, optionsValue: 'Id', 
          optionsText: 'Name', value: EventType, if: EditMode()"&gt;&lt;/select&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;a href="#" data-bind="click: edit"&gt;Edit&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the javascript:</p>
  
  <pre><code>function viewModel(eventJSON) {
      var self = this;
  
      self.EventType = ko.observable(eventJSON.EventType);
      self.EventTypes = ko.observableArray([]);
  
      self.edit = function() {
          $.getJSON("url...", function(eventTypesJSON) {
              self.EventTypes(eventTypesJSON);
          }
      }
  }
  </code></pre>
  
  <p>I'm running into a timing issue with the databinding. When applyBindings is called, the span gets populated correctly. However, when I enter edit mode, the drop down list is not set to the selected value and EventType is set to undefined. </p>
  
  <p>Here's what I think is happening:</p>
  
  <ol>
  <li>The user clicks the Edit button and an ajax call is made to retrieve
  the EventTypes.</li>
  <li>The select is databound. Since the EventTypes array is empty, EventType is set to null.</li>
  <li>The ajax call completes and EventTypes is populated. </li>
  <li>Since EventType was previously set to null, the first item in the drop down is selected. (e.g. the original EvenType value is lost.)</li>
  </ol>
  
  <p>What I'd like it to do:</p>
  
  <ol>
  <li>The user clicks the Edit button and an ajax call is made to retrieve
  the EventTypes.</li>
  <li>The ajax call completes and the EventTypes array is populated.</li>
  <li>The select is databound and the correct item in the list is selected.</li>
  </ol>