2012-02-14 31 views
12

ノックアウトjsのベストプラクティスは、ajax jsonレスポンスが悪くなったときにどのように使用しましたか?ノックアウトjsベストプラクティスajaxエラー処理

ユーザーにエラーが発生したことを表示するためのマッピングをどのように作成しますか? ノックアウトjsでエラーに対応するためにフォームのバインディングを変更するにはどうすればよいですか?

Iは{応答{}:「成功」、データ}の応答オブジェクトを送り返す:

  1. モデル誤差の(JSONオブジェクト応答種類の誤差の3つのレベルがあることを意味し、どのような分野のモデルデータとの「失敗」は、)
  2. サーバーエラー(サーバーからの応答がない)
  3. Serverは

は表示のきれいなのviewmodelの方法を考え出したていないエラーコードで応答間違っていました間違い私は尋ねているのです。

答えて

7

私は個人的には成功したときにノックアウトモデルを更新します。これにより、モデルはエラーの前と同じ状態になります。

エラーが発生した場合、エラーが発生したことをユーザーに伝えたいことがあれば何でもできます。 humane.jsを使用して、何らかの理由で更新または作成が失敗したというメッセージをユーザーに表示します。モデルエラー、応答、サーバーエラーの3つのケースでは、エラー機能で投稿の状態を確認し、別のメッセージを選択してユーザーに表示することができます。

彼らは同じことを自由にするもう一度、または間違いを訂正して再試行してください。

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

私は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フィールドがあります。原型継承を使用することができ、このエラー処理が必要

すべての私のviewmodels:

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

UIは、単純なデータ・バインドは次のとおりです:このビューモデルのAjaxの呼び出しで

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

は次のようになり

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

Javascript Try-Catchは、このモデルでは、まだplエイセンス

関連する問題