Question

Using Knockout 2.0 and MVC3 Razor forms, I am not able to make a dependent observable work when I introduce an ajax method. I have set up a set of observables that are a part of a calculation, and when I return the product of those observables, I am able to set a SPAN tag with the correct result. However, when I try to use the ajax method to handle those observables and return a result, I get unpredictable behavior. First, it appears the ajax POST does not pick up one of the observables when the INPUT fields are updated (var b POSTs to the action method as 0, but then is eventually updated), and then it seems that I am not able to set the result even when it evaluates correctly. It appears there is timing issue with either the observables or the ajax call. Although simply keeping performing the calculation in javascript works fine, my intent is to call ajax methods for more complicated logic. I have removed the call to ko.applybindings from doc.ready(), and also moved the SCRIPT methods to the bottom of the page- this was the only way I found to make this partly functional. My viewModel is set up as follows:

var viewModel = {
    a: ko.observable(0),
    b: ko.observable(1),
    c: ko.observable(2),
    // commented this out, since
    // the dependent observable will handle this
    // d: ko.observable(0)
};

In my dependent observable:

viewModel.d = ko.dependentObservable(function () {
    var theResult = 0;
    $('.theLabel').css("visibility", "visible");
    theResult=viewModel.a() * viewModel.b() * viewModel.c();
    // if we return here we get a valid result 
    return (theResult);

    // prefer to call ajax method
    // first check to ensure one variable is set
    if (viewModel.a() > 0) {
            $.ajax("/myCalculation/getResult", {
                data: ko.toJSON(viewModel),
                type: "post",
                context: viewModel,
                contentType: "application/json",
                success: function (result) {
                    // can't set visibility here
                    $('.theLabel').css("visibility", "visible");
                    // the POST does not pick up some observables, or
                    // does not the set dependent observable at all
                    return result;
                }
            });

        }
    });

Answer 1

There is quite a bit wrong with the function you have setup.

1.) You are returning from your function before making your AJAX call. The code after your return statement will never execute.

2.) Even if you omit the first return statement, your AJAX call is Asynchronous… which means it will execute in the background and return control to the outer scope immediately. Since you don’t have a return statement, then you are going to return undefined.

3.) The comment in your success callback suggests you are expecting the return statement to propagate all the way up to your computed observable. THAT return statement is only scoped to the callback, and not the outer observable. The return value will be used by jQuery, and your observable will long since have returned.

If you want an observable to call an AJAX function you need a seperate value to store the results of the asynchronous call.

Here is a simplified example:

var viewModel = function(){
   var $this = this;

   $this.a = ko.observable();
   $this.b = ko.observable();
   $this.results = ko.observable();

   //No need to assign this computed observable to a variable
   // because the results will be stored in '$this.results'
   // we just need this to handle the automatic updates
   ko.computed(function(){
      var data = {
         a: $this.a(),
         b: $this.b()
      };

      $.post("/do/some/stuff", data, function(results){
         $this.results(results);
      });
   });
};