是否可以使用 AJAX POST 设置依赖于 Knockout 的 observable

Question

使用 Knockout 2.0 和 MVC3 Razor 表单，当我引入 ajax 方法时，我无法进行依赖的 observable 工作。我已经设置了一组作为计算一部分的 observables，当我返回这些 observables 的乘积时，我能够设置一个具有正确结果的 SPAN 标签。但是，当我尝试使用 ajax 方法来处理这些 observables 并返回结果时，我得到了不可预测的行为。首先，当 INPUT 字段更新时，ajax POST 似乎没有拾取其中一个 observables（var b POST 到 action 方法为 0，但最终被更新），然后似乎我无法设置即使它正确评估的结果。似乎 observables 或 ajax 调用都存在时间问题。虽然简单地保持在 javascript 中执行计算工作正常，但我的意图是调用 ajax 方法来实现更复杂的逻辑。我已经从 doc.ready() 中删除了对 ko.applybindings 的调用，并且还将 SCRIPT 方法移到了页面底部——这是我发现使其部分起作用的唯一方法。我的 viewModel 设置如下：

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)
};

在我的依赖 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

你设置的函数有点问题。

1.) 在进行 AJAX 调用之前，您正在从函数返回。 return 语句后面的代码永远不会执行。

2.) 即使您省略了第一个 return 语句，您的 AJAX 调用也是异步的……这意味着它将在后台执行并立即将控制权返回给外部范围。既然你没有 return 语句，那么你将返回 undefined。

3.) 成功回调中的注释表明您期望 return 语句一直传播到您计算的 observable。 THAT return 语句仅作用于回调，而不是外部 observable。返回值将被 jQuery 使用，并且您的 observable 早就返回了。

如果你想要一个 observable 调用一个 AJAX 函数，你需要一个单独的值来存储异步调用的结果。

这是一个简化的例子：

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);
      });
   });
};