javascript - 通过Ajax成功回调更新可观察数组时启用绑定(bind)中断

http://jsfiddle.net/FZ6K6/24/

我有一个带有启用和CSS绑定的按钮（删除输入），当可观察数组包含2个以上项目时，将返回该绑定。

<button data-bind="click: removeInput, enable: Integers().length >2, css { red: Integers().length >2 }">Remove Input</button>

我还有一个函数（loadIntegerSorter），用于将可观察数组设置为包含2个项目。

self.loadIntegerSorter = function () {
    self.Integers([new integer(0, 0, 0), new integer(0, 0, 0)]);
};

我也有一个通过ajax提交的保存功能。在成功回调中，将调用loadIntegerSorter。

success: function (result) {
    if (result.Status == "success") {
        isvm.loadSortedIntegers();
    }
}

但是，这似乎破坏了启用绑定。 CSS绑定在数组项目= 2时表现出预期的效果。但是Enable绑定却没有。我可以在Ajax函数外部成功运行loadIntegerSorter，所以我想这是一个同步问题，但是我不知道解决方案是什么。

我链接到的小提琴不能完全说明问题，因为它取决于发出真正的Ajax请求。但我希望它能显示出足以理解的含义。

详细说明：

这将导致启用绑定的预期行为：

self.save = function () {
    self.isloading();
};

但这不是：

self.save = function () {
    $.ajax("/Home/Index", {
        data: ko.toJSON(self.integerSorter),
        cache: false,
        type: "post",
        contentType: "application/json",
        context: self,
        success: function (result) {
            this.isloading();
        }
    });
};

而且也不是：

self.save = function () {
    self.isloading();

    $.ajax("/Home/Index", {
        data: ko.toJSON(self.integerSorter),
        cache: false,
        type: "post",
        contentType: "application/json",
        context: self,
        success: function (result) {
        }
    });
};

无论问题的原因是什么，它似乎都与ajax调用有关。

最佳答案

1）

在self.save函数内部，您正在调用

self.isLoading(true);

哪个产量


  TypeError：“未定义”不是函数（正在评估
  'self.isLoading（true）'）


告诉您self.isLoading在代码的任何地方都没有声明。即使在发送ajax请求之前，这也会中断代码执行。



2）

与1）相同，但是这次是self.msgbox.status()。未声明：将破坏您的代码。



3）

函数self.loadIntegerSorter在成功函数中显示为self.loadSortedIntegers。同样，self.save函数出现两次，声明两次。第二个将绕过第一个，但是我想第一个正好在提琴中。



4）

在成功函数中，result.Status没有任何意义。您必须了解result只是纯文本字符串，访问字符串的Status属性将导致错误。也许您希望响应是具有Status属性的JSON对象？在这种情况下，您必须自己（JSON.parse(response)）或告诉jQuery为您完成该字符串的反序列化（用$.ajax替换$.getJSON）。

但是，也可能是您没有收到任何JSON，而您只是想访问响应状态，前提是您可以这样做。你不能在成功函数内部，您已经知道请求已成功发送并收到了响应。无需再次检查。



5）

您正在对变量loadSortedIntegers()调用isvm方法。这是完全错误的方法，即使它现在应该可以使用，也可能在将来引起巨大的麻烦。 isvm是用于包含viewModel实例的全局变量。成功函数包含在viewModel本身中，您应该使用this或self访问它自己的方法。类不应使用全局变量访问其自身的实例。问题：如何在成功功能中使用this和/或self？通过将context属性设置为您的this对象可以访问$.ajax。恰好在您编写success: function(){}时，您应该在此之前编写context: this，或者就您而言，编写context: self。

这样做，然后只需使用this.loadSortedIntegers()更改成功函数的内容。



我已自由地对您的提琴进行了一些编辑。花点时间检查差异here并运行它here。

关于javascript - 通过Ajax成功回调更新可观察数组时启用绑定(bind)中断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20459012/