Ember-Validation Issue w/Ember CLI & Ember Data

Question

Я пытаюсь внедрить проверку формы в новом контакте в своем приложении, используя библиотеку проверки ember. В настоящее время я использую 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-валидации, поэтому я не уверен, что это моя проблема в отношении валидаций.

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-validationsaddon. Для чего это стоит, Стивен Пеннер (основная команда ember.js) также внес вклад в аддон. Все готово для Ember CLI.

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

Кроме того, обратите внимание на всех документах, там это еще больше свойств и вариантов использования, которым этот аддон заботится, в том числе помощники рулей, аякс/асинхронное разрешение валидации и некоторые валидаторы для использования. Если вы не нашли тот, который вам нужен, сделайте валидатор function. Используя валидатор function на всем протяжении, легко, сделайте его повторно используемым с помощью ember generate validator unique-username.

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

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