2012-02-14 14 views
12

Quali best practice per Knockout js hai usato quando le risposte di jas json tornano male.knockout js best practice manipolazione degli errori ajax

Come si creano i mapping per visualizzare un errore verificatosi dall'utente? Come si modifica l'associazione di un modulo in Knockout js per gestire gli errori?

rimando un oggetto di risposta di {risposta: "successo", i dati: {}}, che tipo di mezzi che ci sono 3 livelli di errore:

  1. L'errore del modello (risposta oggetto JSON di "fallimento", con il modello di dati di campi quali erano sbagliate)
  2. L'errore del server (nessuna risposta dal server)
  3. server risponde con il codice di errore

non hanno capito un modo viewmodel pulita di visualizzazione di un sbagliare o messaggio che è il motivo per cui chiedo.

risposta

7

Personalmente aggiornerei solo i modelli ad eliminazione diretta in caso di successo. Questo lascia quindi i modelli nello stesso stato precedente all'errore.

In caso di errore, è possibile eseguire qualsiasi operazione che si desidera segnalare all'utente che si è verificato un errore. Vorrei utilizzare humane.js per mostrare all'utente che l'aggiornamento o la creazione non è riuscita per qualche motivo. Nei tre casi per errore del modello, nessuna risposta o errore del server, è possibile controllare lo stato del messaggio nella funzione di errore e scegliere un altro messaggio da visualizzare all'utente

Hanno quindi la libertà di fare la stessa cosa di nuovo, o correggere il loro errore e riprovare.

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

Il modo in cui mi è venuta in mente la gestione degli errori in KO è stato quello di creare una classe di base:

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

questo ha un campo ErrorText osservabile.

Tutti i miei ViewModels che hanno bisogno di questo la gestione degli errori in grado di utilizzare l'ereditarietà prototipale:

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

In queste chiamate vista modelli Ajax assomigliano:

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

L'interfaccia utente è un semplice data-bind:

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

Javascript Try-Catch manca ancora a questo modello in quanto non sono sicuro del atto

Problemi correlati