带有 Ember CLI 和 Ember 数据的 Ember 验证问题

Question

我正在尝试使用 ember-validations 库对我的应用中的新联系人实施表单验证。我目前正在使用带有固定装置的 Ember Data，并且我选择将验证放在模型中，就像 video 中的示例一样。我这几天一直在努力解决这个问题，但似乎仍然无法弄清楚为什么验证不起作用。我没有任何迹象表明错误正在触发。

//app/models/contact.js

import DS from "ember-data";
import EmberValidations from 'ember-validations';

//define the Contact model
var Contact = DS.Model.extend(EmberValidations, {
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
});

//Create Contact fixtures
Contact.reopenClass({
  FIXTURES: [...]
});

Contact.reopen({
  validations: {
    firstName: {
      presence: true,
      length: { minimum: 2 }
    },
    lastName: {
      presence: true
    }
  }
});

export default Contact;

我是 Ember 的新手，有人建议我将以下逻辑放在路由中而不是控制器中。我还没有看到任何使用 ember-validations 完成此操作的示例，所以我不确定这是否是我关于验证的问题。

app/routes/contacts/new.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('contact');
  },

  actions: {
    createContact: function() {
      var contact = this.get('currentModel');

      this.transitionTo('contacts');
            contact.save();
        alert(contact.errors);
    },

    cancelContact: function() {
      var contact = this.get('currentModel');

      contact.destroyRecord();
      this.transitionTo('contacts');
    }
  }
});

我的另一个怀疑是我可能没有正确处理 html 中的错误？

//app/templates/contacts/new.hbs

{{#link-to 'contacts' class="btn btn-primary"}}Contacts{{/link-to}}
<form>
  <label>First Name:</label>
  {{input type="text" value=model.firstName}}<br>
  <span class="error"></span>
  <label>Last Name:</label>
  {{input type="text" value=model.lastName}}<br>
  <span class="error"></span>    
</form>

<button {{action "createContact"}} class="btn btn-primary">Submit</button>
<button {{action "cancelContact"}} class="btn btn-warning">Cancel</button>
<br>

这是我的控制器

//app/controllers/contacts.js

import Ember from "ember";

export default Ember.Controller.extend({

});

我很喜欢 Ember，但这个问题让我大吃一惊。任何帮助将不胜感激。

Answer 1

我正在经历这件事并有一些建议。首先，我会说验证您需要在哪里询问是否有效。如果组件是表单，则可能需要在组件上执行此操作，如果要在保存之前确保它有效，则可能需要在模型上执行此操作，或者如果存在要检查的属性，则可能在路由上执行此操作.

无论如何，无论您选择哪种方法，我都强烈建议您使用ember-cp-validations addon。值得一提的是，Stephen Penner（ember.js 核心团队）也为插件做出了贡献。 Ember CLI 也已准备就绪。

设置实际上与您正在执行的操作非常相似，但您无需重新打开该类，而是使用它定义一个 mixin (example from their docs)。为了创建使用的 mixin，他们有一个名为 buildValidations 的工厂。好处是您可以在任何 Ember 对象上使用它。

一旦您定义了验证并将其混合到对象的创建中，即：Ember.Object.create(Validations, {}); 其中Validations 是您在上面创建的混合（如在文档中）。一切就绪。

在该对象的范围内，您现在在该对象上拥有一个 validations 属性，如下所示：

var Validations = buildValidations({
  greeting: validator('presence', true)
});

export default Ember.Object.create(Validations, {
  greeting: 'Hello World',
  actions: {
    announce: function() {
      alert('The current validation is: ' + this.get('validations.isValid'));
      // per property validation is at:
      alert('The individual validation is: ' + this.get('validations.attrs.greeting.isValid'));
    }
  }
})

车把：

Looks like the form is {{ validations.isValid }}.
You can also <a {{action announce}}>announce the validation</a>.

此外，请查看所有文档，该插件处理的属性和用例更多，包括把手助手、验证的 ajax/async 解析以及一些要使用的验证器。如果您没有找到您想要的人，请创建一个function 验证器。全面使用function 验证器，很容易，使其可与ember generate validator unique-username 一起使用。

希望这能让你在正确的开始。这是一个相对较新的项目，但得到了不错的支持，并且对问题的反应很快。

还应该提到，因为这些验证基于计算的属性，所以它们以“Ember 方式”工作，应该很好用，包括您的模型。