Javascript 通过Ajax成功回调更新可观察数组时启用绑定中断_Javascript_Knockout.js

Javascript 通过Ajax成功回调更新可观察数组时启用绑定中断

javascript knockout.js

Javascript 通过Ajax成功回调更新可观察数组时启用绑定中断,javascript,knockout.js,Javascript,Knockout.js,我有一个带有enable和css绑定的按钮（removeinputs），当一个可观察数组包含2个以上的项时，会返回这些绑定 <button data-bind="click: removeInput, enable: Integers().length >2, css { red: Integers().length >2 }">Remove Input</button> self.loadIntegerSorter = function () {

我有一个带有enable和css绑定的按钮（removeinputs），当一个可观察数组包含2个以上的项时，会返回这些绑定

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

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

然而，这似乎打破了启用绑定。当数组项=2时，CSS绑定的行为与预期一致。但是Enable绑定没有。我可以在Ajax函数之外成功运行loadIntegerSorter，因此我认为这是一个同步问题，但我不知道解决方案是什么

我链接到的fiddle并没有充分说明这个问题，因为它依赖于发出真正的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调用有关。

尝试使用valueHasMutated直接推送更新以获得可观察性：

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

};

(一)

在您调用的

self.save

函数中

self.isLoading(true);

产生

TypeError:“未定义”不是函数（正在计算 '自卸载（真）'）

告诉您，

self.isLoading

不会在代码中的任何地方声明。这将在发送ajax请求之前中断代码执行

(二)

与1）相同，但这次是针对

self.msgbox.status（）

。未声明：将破坏您的代码

(三)

函数

self.loadIntegerSorter

在success函数中显示为

self.loadSortedIntegers

。另外，

self.save

函数出现两次。第二个将超越第一个，但我想第一个就在那里

(四)

在success函数中，

result.Status

没有任何意义。您必须了解

result

只是一个纯文本字符串，访问字符串的

Status

属性将导致错误。也许您希望响应是一个带有

Status

属性的JSON对象？如果是这种情况，您必须自己反序列化字符串（

JSON.parse（response）

），或者告诉jQuery为您反序列化字符串（将

$.ajax

替换为

$.getJSON

）

然而，也可能是您没有收到任何JSON，您只是想访问响应状态，假设您可以这样做。你不能。在成功函数中，您已经知道您的请求已成功发送，并且已收到响应。不用再查了

(五)

您正在对变量

isvm

调用

loadSortedIntegers（）

方法。这是一个完全错误的方法，即使它现在可以工作，将来也可能会造成巨大的麻烦

isvm

是用于包含viewModel实例的全局变量。成功函数包含在viewModel本身中，您应该使用

this

或

self

访问它自己的方法。类不应使用全局变量访问自身的实例。问题：如何在成功功能中使用

this

和/或

self

可以通过将context属性设置为$.ajax
对象来实现此

。正如您编写

success:function（）
这样做，然后只需使用this.loadSortedIntegraters（）
更改成功函数的内容即可

我冒昧地对你的小提琴做了一些修改。花点时间检查差异并运行它
 您可以在JSFIDLE上执行真正的ajax请求。左边有一个标签，上面有他们的说明。谢谢。我已经尝试实现echo/Json，但是我得到了一个错误：没有定义请求。别担心，这个问题应该得到解决。查看我的最新答案。请注意，我的答案是基于你小提琴的第23次修订版。您所做的新编辑引入了新的错误，我没有涵盖这些错误。要点已确定-感谢您的解释。不过，以上这些似乎都不起作用。我现在没有合适的电脑，但我会尽快再次检查你的小提琴。同时，您可能希望在success函数中设置一个断点，并使用chromedev工具对其进行检查。只需在其内部编写“调试器”，并在启用chrome开发工具的情况下启动它。要点1）、2）和3）：这些是指我的应用程序中不相关的功能，我还没有从小提琴中删除这些功能。如果我链接到错误的版本，请道歉。这个应该更好：第4）点Status是从服务器返回的Json对象。它似乎工作正常。第5点）我已经做了这些更正，但仍然没有成功（感谢您分析我的代码，但我觉得与解决方案没有任何关系。正如我所提到的，CSS绑定的行为与预期的一样，因此我不理解为什么启用绑定没有。启用绑定在我的小提琴中按预期工作。不管是否有不相关的功能，它们都可能使代码崩溃，并阻止每一行的执行之后。状态也是一样。由于您没有反序列化结果，因此它将仍然是一个简单的字符串并进行访问。字符串的状态将导致代码崩溃。fiddle 24包含一个新错误。new Request.JSON不是有效的JavaScript语法。对象“Request”不存在。