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

Question

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

我有一个带有 enable 和 css 绑定(bind)的按钮(删除输入)，当可观察数组包含超过 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();
    }
}

但是，这似乎破坏了启用绑定(bind)。 CSS 绑定(bind)的行为与数组项 = 2 时的预期一致。但 Enable 绑定(bind)则不然。我可以在 Ajax 函数之外成功运行 loadIntegerSorter，所以我想这是一个同步问题，但我不知道解决方案是什么。

我链接到的 fiddle 没有完全说明问题，因为它取决于发出真正的 Ajax 请求。但我希望它足以让人理解。

阐述:

这会导致启用绑定(bind)的预期行为:

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调用有关。

Answer 1

1)

在您正在调用的 self.save 函数中

self.isLoading(true);

哪个产量

TypeError: 'undefined' is not a function (evaluating 'self.isLoading(true)')

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

---

2)

与 1) 相同，但这次用于 self.msgbox.status()。未声明:会破坏您的代码。

---

3)

函数 self.loadIntegerSorter 在成功函数中显示为 self.loadSortedIntegers。此外，self.save 函数出现了两次声明。第二个将覆盖第一个，但我猜第一个就在 fiddle 中。

---

4)

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

但是，也可能是您没有收到任何返回的 JSON，您只是想访问响应状态，假设您可以那样做。你不能。在 success 函数中，您已经知道您的请求已成功发送并收到响应。无需再次检查。

---

5)

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

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

---

我冒昧地对您的 fiddle 进行了一些编辑。花点时间检查差异 here并运行它 here .