title: KnockoutJS - Frustrations with ko.computed and an AJAX request
body: <p>I am simply trying to pull some data from an ajax request. The ajax call works - I know the data is retrieved. But it just isn't setting the value of the ko.computed... </p>
  
  <pre><code>        function viewModel() {
              this.Id = ko.observable("@Model.Identity()");
              this.Points = ko.computed({ 
                  read: function () {
                      $.ajax({
                          url: '/skills/points',
                          data: { id: this.Id },
                          type: 'get',
                          success: function (data) {
                              return data;
                          }
                      });
                  },
                  owner: this
              });
          }
  </code></pre>
  
  <p>So a call like ...</p>
  
  <pre><code>&lt;span data-bind="text: Points"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Just isn't working. Can anyone help me figure out what I am doing so wrong?</p>
  
  <h2>Update</h2>
  
  <p>I'm using the following code, following RPN's suggestion - and I just can't get it to function at all. It won't look at the controller, it won't return the data... it just does nothing. I've tried all three examples given with no success.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //an observable that retrieves its value when first bound
      ko.onDemandObservable = function (callback, target) {
          var _value = ko.observable();  //private observable
  
          var result = ko.computed({
              read: function () {
                  //if it has not been loaded, execute the supplied function
                  if (!result.loaded()) {
                      callback.call(target);
                  }
                  //always return the current value
                  return _value();
              },
              write: function (newValue) {
                  //indicate that the value is now loaded and set it
                  result.loaded(true);
                  _value(newValue);
              },
              deferEvaluation: true  //do not evaluate immediately when created
          });
  
          //expose the current state, which can be bound against
          result.loaded = ko.observable();
          //load it again
          result.refresh = function () {
              result.loaded(false);
          };
  
          return result;
      };
  
      $(document).ready(function () {
          function User(id, name) {
              this.Id = ko.observable(id);
              this.Name = ko.observable(name);
          }
          function viewModel() {
              var self = this;
  
              this.User = ko.onDemandObservable(this.Update, this);
  
              this.Update = function () {
                  return $.ajax({
                      url: '/home/user/',
                      data: { id: 1 },
                      dataType: 'json'
                  }).pipe(function (data) {
                      return new User(data.Id, data.Name);
                  });
              };
          };
          var model = new viewModel();
          ko.applyBindings(model);
          model.User();
      });
  &lt;/script&gt;
  
  &lt;span data-bind="text: User.Name"&gt;&lt;/span&gt;
  </code></pre>
  
  <h2>Update (2)</h2>
  
  <p>Following more instructions, I have narrowed down some of the problem. Defining the <code>callback</code> as a function on the viewModel doesn't seem to work (I am not sure why) but declaring an inline function does yield ... something different. Still isn't working though. Here is an update.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //an observable that retrieves its value when first bound
      ko.onDemandObservable = function (callback, target) {
          var _value = ko.observable();  //private observable
  
          var result = ko.computed({
              read: function () {
                  //if it has not been loaded, execute the supplied function
                  if (!result.loaded()) {
                      callback.call(target);
                  }
                  //always return the current value
                  return _value();
              },
              write: function (newValue) {
                  //indicate that the value is now loaded and set it
                  result.loaded(true);
                  _value(newValue);
              },
              deferEvaluation: true  //do not evaluate immediately when created
          });
  
          //expose the current state, which can be bound against
          result.loaded = ko.observable();
          //load it again
          result.refresh = function () {
              result.loaded(false);
          };
  
          return result;
      };
  
      $(document).ready(function () {
          function User(id, name) {
              this.Id = ko.observable(id);
              this.Name = ko.observable(name);
          }
          function viewModel() {
              var self = this;
  
              this.User = ko.onDemandObservable(function(){
                  $.ajax({
                      url: '/home/user/',
                      data: { id: 1 },
                      dataType: 'json',
                      success: function (data) {
                          self.User(new User(data.Id, data.Name));
                      }
                  });
              }, this);
  
              //this.Update = function () {
              //  $.ajax({
              //      url: '/home/user/',
              //      data: { id: 1 },
              //      dataType: 'json',
              //      success: function (data) {
              //          self.User(new User(data.Id, data.Name));
              //      }
              //  });
              //};
          };
          var model = new viewModel();
          ko.applyBindings(model);
          model.User();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And then trying to display any of the data retrieved still fails.</p>
  
  <pre><code>&lt;span data-bind="text: User.Name"&gt;&lt;/span&gt;
  </code></pre>
  
  <h2>Update (3)</h2>
  
  <p>A bit of a breakthrough! If I change the declarative binding to look like this ..</p>
  
  <pre><code>&lt;span data-bind="with: User"&gt;
      &lt;span data-bind="text: Id"&gt;&lt;/span&gt;
      &lt;span data-bind="text: Name"&gt;&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Then I am starting to see results. I think I am almost getting there...</p>