0

使用 Knockout 2.0 和 MVC3 Razor 表单，当我引入 ajax 方法时，我无法进行依赖的可观察工作。我已经设置了一组作为计算一部分的 observables，当我返回这些 observables 的乘积时，我能够设置一个具有正确结果的 SPAN 标签。但是，当我尝试使用 ajax 方法来处理这些可观察对象并返回结果时，我会得到不可预测的行为。首先，当 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)
};

在我的依赖观察中：

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

        }
    });
4

1 回答 1

2

您设置的功能有很多错误。

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

2.) 即使您省略了第一个 return 语句，您的 AJAX 调用也是异步的……这意味着它将在后台执行并立即将控制权返回给外部范围。由于您没有返回语句，因此您将返回未定义。

3.) 成功回调中的注释表明您期望 return 语句一直传播到您计算的 observable。该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);
      });
   });
};
于 2012-07-03T03:50:39.023 回答