Ember-Validation Issue с ​​Ember CLI и Ember Data

Question

Я пытаюсь реализовать проверку формы для нового Контакта в моем приложении с помощью библиотеки 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({

});

Я наслаждаюсь Эмбер, но эта проблема ошеломляет меня очень. Любая помощь приветствуется.

Answer 1

Я прохожу эту точную вещь и у меня есть несколько советов. Сначала я бы сказал, подтвердите, где вы должны спросить что-то, если это действительно. Вам может потребоваться сделать это на компоненте, если это форма, вам может потребоваться сделать это на модели, если вы хотите убедиться, что она действительна перед сохранением, или, возможно, на маршруте, если есть свойства, которые вы хотите проверить.,

В любом случае, какой бы метод вы ни выбрали, я настоятельно рекомендую использовать ember-cp-validations аддон. Что бы это ни стоило, Стивен Пеннер (основная команда ember.js) также внес свой вклад в дополнение. Также все готово для Ember CLI.

Настройка на самом деле очень похожа на то, что вы делаете, но вместо того, чтобы снова открывать класс, вы должны определить с ним миксин ( пример из их документации). Для создания используемого миксина у них есть фабрика под названием 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,

Надеюсь, это поможет вам правильно начать. Это относительно новый проект, но имеет достойную поддержку, и ответы на вопросы были быстрыми.

Следует также отметить, что, поскольку эти проверки основаны на вычисленных свойствах, они работают "по-разному", что должно отлично работать, включая ваши модели.