title: Knockout: Asynchronous call in model binding
body: <p>I'm having a problem. My async return method is never hit. I do not get to use the response of $.getJSON and show it in the UI.
  Here's the code:</p>
  
  <pre><code>function SearchResult() {
      var self = this;
      self.Class;
      self.Id;
      self.Type;
      self.Naam;
      self.Omschrijving;
      self.DocumentLink;
  
      // added to server side object model
      self.DetailUrl;
  
      self.detailsContent = ko.observable();
      self.detailsEnabled = ko.observable(false),
      self.enableDetails = function () {
          var aUrl = "/Search/GetDocuments?Id=" + this.Id + "&amp;type=" + this.Type;
          $.getJSON(aUrl, function (data)
          {
              this.detailsContent(data);
              this.detailsEnabled(true);
          });
      };
      self.disableDetails = function() {
          this.detailsEnabled(false);
      }
  }
  
  &lt;!-- knockout template search results --&gt;
                  &lt;div class="list-group searchresults" data-bind="foreach: searchResults"&gt;
  
                      &lt;div class="list-group-item" data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"&gt;
                          &lt;a data-bind="attr: { href : DetailUrl, target : '_blank'}"&gt;&lt;h4 class="list-group-item-heading" data-bind="text: Naam"&gt;&lt;/h4&gt;&lt;/a&gt;
                          &lt;p class="list-group-item-text"&gt;
                              &lt;span data-bind="text: Omschrijving"&gt;&lt;/span&gt;
  
                          &lt;/p&gt;
                          &lt;div data-bind="visible: detailsEnabled"&gt;
                              &lt;div data-bind="html: detailsContent"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Just to be clear, this is never executed:</p>
  
  <pre><code> this.detailsContent(data);
   this.detailsEnabled(true);
  </code></pre>
  
  <p>The purpose of this all is to asynchronously load a piece of html on mouseover of an element.</p>