Question

我尝试使用ember-validations库在我的应用中的新联系人上实施表单验证。我目前正在使用固定装置的Ember数据，并且我已选择将验证放在模型中，就像此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的新手，并且建议将以下逻辑放在路线而不是控制器中。我还没有看到有关使用余烬验证的任何示例，所以我不确定这是否是我的验证问题。

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方式”工作，应该很有效，包括你的模型。

Ember-Validation Issue with Ember CLI＆amp; Ember数据

1 个答案: