data - Manejo de errores de validación en Ember.js

ember tutorial

Question

Tengo una aplicación de rieles que sirve json a una interfaz de ascua.

Estoy tratando de mostrar los errores de validación en un formulario en el cliente.

Rails está devolviendo este json:

{"errors":{"hometown":["is too long (maximum is 64 characters)"]}}

En mi plantilla de manillar para la ruta actual, estoy intentando iterar a través de los errores, pero no obtengo ningún resultado para la sección de errores:

<div class="form-group">
  <label>Hometown</label>
  {{#each errors.hometown}}
    {{this}}
  {{/each}}
  {{input type="text" class="form-control" valueBinding="effectiveUser.hometown" disabled=entryNotAllowed size="50"}}
</div> 

También actualicé mi RESTadapter basado en este blog: https://marcqualie.com/2014/04/model-errors-in-emberjs para incluir:

  ajaxError: function(jqXHR) {
    var error = this._super(jqXHR);
    if (jqXHR && jqXHR.status === 422) {
      var jsonErrors = Ember.$.parseJSON(jqXHR.responseText)["errors"];
      return new DS.InvalidError(jsonErrors);
    } else {
      return error;
    }
  }

Todavía no entiendo el contexto de qué es este objeto de error y por qué mi vista tiene acceso a él, pero varias fuentes diferentes parecen decir que esta configuración debería funcionar. Cualquier idea sería apreciada.

Answer 1

Bueno, por lo que entiendo, es normal que esto no funcione:

Para guardar su modelo en su controlador / ruta / vista, está realizando una operación de save() que devuelve una promesa. Si se rejected una promesa, se puede ejecutar una función para manejar este rechazo con un reason como parámetro. En su caso, el objeto DS.InvalidError se convertirá en este reason .

myModel.save().then(function(value){
  //success
},function(reason){
  //fail
});

entonces en tu caso (pero depende de dónde estés manejando la acción que suponeré en el controlador) algo así debería funcionar;

actions: {
  submitForm : function(){
    this.set("errors",null);
    var ctx=this;
    myModel.save().then( function(){
      //display a succes msg ?
    }, function(errors){
      ctx.set("errors",errors);
    });
  }                              
}

Answer 2

Implementé el método ajaxError como se muestra a continuación.

App.ApplicationAdapter = DS.RESTAdapter.extend({
  ajaxError: function(jqXHR){
  error = this._super(jqXHR);

  if (jqXHR.status == 422) {
    response = Ember.$.parseJSON(jqXHR.responseText);
    errors = {};

    if (typeof response.errors !== ''undefined'') {
      jsonErrors = response.errors;
      Ember.keys(jsonErrors).forEach(function(key) {
        errors[Ember.String.camelize(key)] = jsonErrors[key]
      });
    }
    if (typeof response.message !== ''undefined'') {
      errors[''Message''] = response.message;
    }

    return new DS.InvalidError(errors)
  } else {
    return error
  }
  }

});

Usando el código anterior, puedo obtener errors en mi plantilla.

{{#each message in errors.messages}}
  <strong>{{message}}</strong><br />
{{/each}} 

Answer 3

Recientes Beta de Ember Data desde 1.0 Beta 12 pasan los errores al modelo. La tienda procesa los resultados InvalidError por usted y coloca los errores en el modelo.

Envié un PR # 2392 que se ha fusionado, lo que permite a los serializadores de su modelo la oportunidad de extraer errores de la carga de error antes de establecerse en el modelo. La implementación predeterminada asegura que las claves de carga útil de error ahora se asignan correctamente a las teclas de atributo, mientras que anteriormente este no era el caso.

Ember Data solo aplicará errores al modelo que tenga un atributo correspondiente definido. Esto ha sido una fuente de frustración ya que a menudo hay errores (por ejemplo, "base") que se aplican al modelo como un todo. Esto se trata en el ejemplar pendiente # 1984 , con la siguiente solución provisional hasta que se fusione.

DS.Model.reopen({
    adapterDidInvalidate: function(errors) {
      var recordErrors = this.get(''errors'');
      for (var key in errors) {
        if (!errors.hasOwnProperty(key)) continue;
        recordErrors.add(key, errors[key]);
      }
    }
});

Su código de plantilla también debe seguir el ejemplo en DS.Errors :

{{#each message in errors.messages}}
  <div class="error">
    {{message}}
  </div>
{{/each}}

Es posible que desee utilizar los errores para el método para apuntar a un atributo específico.

También es posible que desee utilizar un auxiliar o componente que extraiga un error de modelo específico de atributo y lo marque adecuadamente. Algunos ejemplos de código sobre cómo hacer esto están disponibles en el complemento de formularios de ember.

También descubrí un tutorial sobre el manejo de errores del servidor Ember Data que puede ser útil, simplemente ignore el bit RESTAdapter ya que está desactualizado.