Validation 如何在Ember Data 1.0.0中处理服务器端验证

我正在使用Ember 1.2.0和最新的Ember Data Beta版，并想知道如何处理服务器端错误（来自API调用）

非常相似，但不起作用

首先，不会触发

becameInvalid

方法。我正在使用（我必须吗？）

我的API发送一个422状态代码和如下响应：

{"errors":{"name":["has already been taken"],"initial":["has already been taken"]}}

model.js

Docket.Customer = DS.Model.extend( Ember.Validations, {
  name:        DS.attr('string'),
  initial:     DS.attr('string'),
  description: DS.attr('string'),
  validations: {
    name: {
      presence: true
    }
  },
  becameError: function() {
    alert('there was an error!');
  },
  becameInvalid: function(errors) {
    alert("Record was invalid because: " + errors);
  }
});

Docket.OrganizationCustomersController = Ember.ArrayController.extend({

  actions: {

    save: function () {
      var customer = this.store.createRecord('customer');
      customer.set('name', this.get('name'));
      customer.set('initial', this.get('initial'));
      customer.set('description', this.get('description'));

      customer.save().then(function() {
        console.log('jeah')
      }, function() {
        console.log('nooo')
      });

    }

  }

});

controller.js

Docket.Customer = DS.Model.extend( Ember.Validations, {
  name:        DS.attr('string'),
  initial:     DS.attr('string'),
  description: DS.attr('string'),
  validations: {
    name: {
      presence: true
    }
  },
  becameError: function() {
    alert('there was an error!');
  },
  becameInvalid: function(errors) {
    alert("Record was invalid because: " + errors);
  }
});

Docket.OrganizationCustomersController = Ember.ArrayController.extend({

  actions: {

    save: function () {
      var customer = this.store.createRecord('customer');
      customer.set('name', this.get('name'));
      customer.set('initial', this.get('initial'));
      customer.set('description', this.get('description'));

      customer.save().then(function() {
        console.log('jeah')
      }, function() {
        console.log('nooo')
      });

    }

  }

});

becameError

方法被激发，但是

becameInvalid

方法没有

---

第二个问题：即使触发了错误，Ember.js也会将新记录添加到DOM中。如何防止这种行为？

您的错误json是可以的，我认为您使用的是

DS.RESTAdapter

，并且它没有实现基于json的

becameInvalid

现在已经实现了DS.ActiveModelAdapter，因此我建议您将适配器配置更改为：

Docket.ApplicationAdapter = DS.ActiveModelAdapter;

---

您的错误json是可以的，我认为您使用的是

DS.RESTAdapter

，它没有实现基于json的

becameInvalid

现在已经实现了DS.ActiveModelAdapter，因此我建议您将适配器配置更改为：

Docket.ApplicationAdapter = DS.ActiveModelAdapter;

---

为了保持DS.RestAdapter，您可以使用ActiveModelAdapter中的方法覆盖其ajaxError方法

对于今天的代码，由于需要一些依赖项，因此稍微进行了调整，代码将是：

App.ApplicationAdapter = DS.RESTAdapter.extend({
    // ... your own customizations,
    ajaxError: function(jqXHR) {
        var error = this._super(jqXHR);

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

            if (response.errors !== undefined) {
                var jsonErrors = response.errors;

                Ember.EnumerableUtils.forEach(Ember.keys(jsonErrors), function(key) {
                    errors[Ember.String.camelize(key)] = jsonErrors[key];
                });
            }

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

显然，您有机会适应后端的具体情况：HTTP代码（422不是标准代码）和格式

资料来源：

---

为了保持DS.RestAdapter，您可以使用ActiveModelAdapter中的方法覆盖其ajaxError方法

对于今天的代码，由于需要一些依赖项，因此稍微进行了调整，代码将是：

App.ApplicationAdapter = DS.RESTAdapter.extend({
    // ... your own customizations,
    ajaxError: function(jqXHR) {
        var error = this._super(jqXHR);

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

            if (response.errors !== undefined) {
                var jsonErrors = response.errors;

                Ember.EnumerableUtils.forEach(Ember.keys(jsonErrors), function(key) {
                    errors[Ember.String.camelize(key)] = jsonErrors[key];
                });
            }

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

显然，您有机会适应后端的具体情况：HTTP代码（422不是标准代码）和格式

资料来源：

---

谢谢，但这不会改变任何事情。您对我的第二个问题有什么想法吗？关于becameInvalid，只是更新到

ActiveModelAdapter

在我的测试中起了作用。关于第二个问题，ember data正在考虑处于isInvalid状态的记录，您可以使用一种变通方法来仅过滤有效数据，在Fiddle中查看，但这会产生一种不酷的UI效果，注释会出现在注释列表中，当它设置为无效时，则会被删除。事实上，您的记录不会被保存（保留在服务器中并带有id），但仍然显示在客户列表中，因为执行

this.store.find（'customer'）

操作时，所有客户以及由

this.store.createRecord（'customer'）创建的任何新客户都会返回一个
RecordArray

将独立于您的当前状态列出：已加载、已保存、无效。因此您需要使用

this.store.filter（'customer'，函数（customer）{return customer.get（'isValid'）}进行筛选

以实现您想要的。谢谢，但这不会改变任何事情。您对我的第二个问题有什么想法吗？关于becameInvalid，仅更新到

ActiveModelAdapter

在我的测试中起作用。关于第二个问题，余烬数据正在考虑处于isInvalid状态的记录，您可以使用一种变通方法来只过滤有效数据，给出一个l在Fiddle中ook，但这会创建一个不酷的UI效果，注释会出现在注释列表中，当设置为无效时，则会被删除。事实上，您的记录不会保存（保留在服务器中并带有id），但仍然会出现在客户列表中，因为当您执行

this.store.find（'customer'）时

返回所有客户的

RecordArray

，由

this.store.createRecord（'customer'）

创建的任何新客户将独立于当前状态列出：已加载、已保存、无效。因此您需要使用

this.store.filter（'customer'，函数（customer）{return customer.get（'isValid'）}进行筛选

以实现您的目标。