thực hành tốt nhất knockout js xử lý lỗi ajax

Question

Thực tiễn tốt nhất cho Knockout js bạn đã sử dụng khi phản hồi jj ajax trở lại xấu.

Làm thế nào để bạn tạo ánh xạ để hiển thị lỗi đã xảy ra với người dùng? Làm cách nào để thay đổi liên kết của biểu mẫu trong Knockout js để điều chỉnh lỗi?

tôi gửi lại một đối tượng phản ứng của {phản ứng: "thành công", dữ liệu: {}}, trong đó loại có nghĩa là có 3 mức độ lỗi:

1. Lỗi Model (phản ứng đối tượng json của "thất bại", với mô hình dữ liệu của lĩnh vực gì là sai)
2. các lỗi máy chủ (không có phản hồi từ máy chủ)
3. Server đáp ứng với mã lỗi

chưa tìm ra một cách viewmodel sạch hiển thị một sai lầm hoặc tin nhắn đó là lý do tôi hỏi.

Answer 1

Cá nhân tôi chỉ cập nhật mô hình loại trực tiếp khi thành công. Điều này sau đó lá các mô hình trong trạng thái giống như trước khi lỗi.

Trong trường hợp xảy ra lỗi, bạn có thể làm bất cứ điều gì bạn muốn cho người dùng biết đã xảy ra lỗi. Tôi sẽ sử dụng humane.js để hiển thị thông báo cho người dùng rằng việc cập nhật hoặc tạo đã thất bại vì một số lý do. Trong ba trường hợp của bạn cho lỗi mô hình, không có lỗi phản hồi hoặc lỗi máy chủ, bạn có thể kiểm tra trạng thái của bài đăng trong chức năng lỗi và chọn một thông báo khác để hiển thị cho người dùng

Sau đó họ có quyền tự do làm điều tương tự một lần nữa, hoặc sửa lỗi của họ và thử lại.

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

Answer 2

Con đường tôi đã đi lên với xử lý lỗi trong KO đã được để tạo ra một lớp cơ sở:

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

này có một trường ErrorText thể quan sát được.

Tất cả ViewModels của tôi rằng cần xử lý lỗi này có thể sử dụng thừa kế nguyên chủng:

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

Trong cuộc gọi xem các mô hình ajax trông giống như:

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

UI là một đơn giản dữ liệu ràng buộc:

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

Javascript Try-Catch vẫn bị thiếu trong mô hình này vì tôi không chắc chắn về acement