2

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

//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，但这个问题让我大吃一惊。任何帮助将非常感激。

4

1 回答 1

3

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

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

该设置实际上与您正在执行的操作非常相似，但是您无需重新打开该类，而是使用它定义一个 mixin（来自他们的文档的示例）。为了创建使用的 mixin，他们有一个名为buildValidations. 好处是您可以在任何 Ember 对象上使用它。

一旦您定义了您的验证并将其混合到您的对象的创建中，即：您在上面创建的 mixinEmber.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 方式”工作，应该很好用，包括你的模型。

于 2015-09-30T23:41:22.710 回答