Question

当ajax json响应变坏时，您使用了Knockout js的最佳做法。

如何创建映射以显示用户发生的错误？如何更改Knockout js中表单的绑定以适应错误？

我发回了{response：“success”，data：{}}的响应对象，这意味着有3个级别的错误：

模型错误（“失败”的json对象响应，包含哪些字段错误的模型数据）
服务器错误（服务器无响应）
服务器响应错误代码

还没有想出一个干净的viewmodel方式来显示错误消息，这就是我要问的原因。

Answer 1

我在KO中提出错误处理的方法是创建一个基类：

errorHandlingViewModel = function () {
    var self = this;
    self.ErrorText = ko.observable();
    self.errorHandler = function (jqXHR, textStatus, errorThrown) {
        self.ErrorText('An error has occured, please refresh the page and try again in a little while. (' + textStatus + ':' + errorThrown + ')');
    };
    self.validationErrorHandler = function (err) {
        //todo
        alert('validation error ' + err);
    }
    self.successHandler = function (data, onSuccess) {
        if (data.result == "success") {
            if (onSuccess) {
                onSuccess(data.data);
            }
        }
        else {
            if (data.data && data.data.Tag) {
                if (data.data.Tag == "ValidationError") {
                    validationErrorHandler(data.data.Tag);
                }
            }
            errorHandler(null, data.result, data.data);
        }
    };
};

这有一个可观察的ErrorText字段。

需要此错误处理的所有ViewModel都可以使用原型继承：

viewModel.prototype = new errorHandlingViewModel();
var mainViewModel = new viewModel();
ko.applyBindings(mainViewModel, $("#locationTOApplyBindingTo")[0]);

在此视图模型中，ajax调用如下所示：

$.ajax({
    type: 'POST',
    url: myURL,
    data: myData,
    success: function (data) {self.successHandler(data,success);},
    error: self.errorHandler
}); //end ajax

UI是一个简单的数据绑定：

<div class="error" data-bind="visible:ErrorText">
    <div class="innerMSGContainer">
        <div class="innerMSG" data-bind="text:ErrorText"></div>
    </div>
</div>

此模型仍然缺少Javascript Try-Catch，因为我不确定该位置

Answer 2

我个人只会在成功后更新淘汰赛模型。然后，这使模型处于与错误之前相同的状态。

如果出现错误，您可以执行任何想要告诉用户出错的操作。我会使用humane.js向用户显示由于某种原因更新或创建失败的消息。在三种模型错误，无响应或服务器错误的情况下，您可以检查错误功能中的帖子状态，并选择要向用户显示的其他消息

然后他们可以自由地再次做同样的事情，或者纠正他们的错误并再试一次。

$.post("somewhere")
.success(function() {
    // update knockout models here
})
.error(function() {
    // show error message to user
})
.complete(function() {
    // reset any temporary variables
});

淘汰赛js最佳实践ajax错误处理

2 个答案: