ember.js - 处理 Ember.js 中的验证错误

Question

我有一个为 ember 前端提供 json 的 rails 应用程序。

我试图在客户端的表单上显示验证错误。

Rails 正在返回这个 json:

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

在当前路线的 Handlebars 模板中，我试图遍历错误，但我没有得到错误部分的任何输出:

<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> 

我还根据此博客更新了我的 RESTadapter: https://marcqualie.com/2014/04/model-errors-in-emberjs包括:

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

我仍然真的不明白这个错误对象是什么的上下文，以及为什么我的 View 可以访问它，但几个不同的消息来源似乎说这个设置应该有效。任何见解将不胜感激。

Answer 1

最近 Ember Data Beta 自 1.0 Beta 12 以来将错误传递给模型。店铺处理InvalidError为您提供结果并将错误放在模型上。

我提交了 PR #2392它已合并，允许您的模型序列化程序有机会在模型上设置之前从错误有效负载中提取错误。默认实现确保错误有效负载键现在正确映射到属性键，而以前情况并非如此。

Ember Data 仍然只会将错误应用于定义了相应属性的模型。这一直是令人沮丧的根源，因为通常存在适用于整个模型的错误(例如“基础”)。这包括在未完成的 issue #1984 中，使用以下解决方法，直到合并为止。

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

您的模板代码也应遵循 DS.Errors 中的示例:

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

您不妨使用 errorsFor方法来定位一个特定的属性。

您可能还想使用帮助程序或组件来提取特定于属性的模型错误并对其进行适当标记。一些 example code有关如何执行此操作的信息可在 ember-forms 附加组件中找到。

我也刚刚发现了一个 tutorial on Ember Data server side error handling这可能很有用，只需忽略 RESTAdapter 位，因为它现在已经过时了。