Проверка формы в EmberJS

Question

Мне просто интересно, какой общий шаблон для проверки форм в EmberJS? Для моего App.IndexView у меня есть форма, и когда вы нажимаете кнопку отправки, цель устанавливается в представление, поэтому я могу выполнить некоторую проверку. Это отлично работает до такой степени, что мне нужно что-то делать с полями, в которых есть ошибки. Я хотел бы просто добавить класс в поля с ошибками, но не совсем уверен, как это сделать. Должен ли IndexView проверять форму или я должен создать представление для каждого поля, которое проверяет самосогласование? Ниже приводится то, что я имею в своем IndexView.

App.IndexView = Ember.View.extend 


    create: (model) -> 

    valid = @_validate model 

    if valid is true 
     @get('controller').send 'createUser' 
    else 
     # HANDLE THE FIELDS WITH ERRORS 

    _validate: (model) -> 

    invalid = [] 
    validations = { 
     firstName: @_validateString model.get 'firstName' 
     lastName: @_validateString model.get 'lastName' 
     email: @_validateEmail model.get 'email' 
     password: @_validatePassword model.get 'password' 
     accountType: @_validateString model.get 'accountType' 
    } 

    # This will get all of the values then runs uniq to see if the 
    # form is valid 
    validForm = _.chain(validations).values().uniq().value() 

    if validForm.length is 1 and validForm[0] 
     true 
    else 
     # other wise build up an array of the fields with issues 
     for field, val of validations 
     if val is false 
      invalid.push field 

     invalid 

    _validateString: (str) -> 
    return false unless str 
    if str isnt '' then true else false 

    _validateEmail: (str) -> 
    pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 
    pattern.test str 

    _validatePassword: (str) -> 
    return false unless str 
    if str.length >= 6 then true else false 

и шаблон

<div class="row"> 
    <div class="span12"> 
    <div class="signup"> 
     <form class="form-horizontal offset3"> 
     <div class="control-group"> 
      <label class="control-label" for="first_name">First Name</label> 
      <div class="controls"> 
      {{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}} 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="last_name">Last Name</label> 
      <div class="controls"> 
      {{ view Ember.TextField placeholder="Last Name" required="true" valueBinding='lastName' name='last_name' viewName='lastNameField'}} 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="email">Email</label> 
      <div class="controls"> 
      {{ view Ember.TextField placeholder="Email" required="true" type="email" valueBinding='email' name='email' viewName='emailField'}} 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="password">Password</label> 
      <div class="controls"> 
      {{ view Ember.TextField placeholder="Password" required="true" type="password" valueBinding='password' name='password' viewName='passwordField'}} 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="">Account Type</label> 
      <div class="controls"> 
      {{#view Ember.RadioButtonGroup name="accountType" required="true" valueBinding="accountType"}} 
       <label class="radio"> 
       {{view RadioButton checked='false' value="landlord"}} 
       Landlord 
       </label> 
       <label class="radio"> 
       {{view RadioButton checked='false' required="true" value="tenant"}} 
       Tenant 
       </label> 
      {{/view}} 
      </div> 

     </div> 
     <div class="control-group"> 

      <div class="controls"> 
      <input class="btn btn-primary" {{action create model target='view' }} type="submit" value="Sign Up"> 
      </div> 

     </div> 
     </form> 

    </div> 

    </div> 

</div> 

Answer 1

Я просто интересно, что общий шаблон для проверки форм в EmberJS?

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

• validations-in-emberjs-application.html рекомендует выполнять проверку на уровне контроллера, с видом используется для запуска проверки, когда фокус изменения. Этот скринкаст демонстрирует, как этот шаблон можно использовать для проверки нескольких простых форм-полей.

• Asynchronous-Form-Field-Validation-With-Ember содержит несколько повторно используемых компонентов, которые могут использоваться для выполнения простых проверок на уровне представления.

• ember-validations это библиотека, которая может быть использована для добавления активной записи возможности проверки стиля для любого Ember-объекта

Для моего App.IndexView я имею форму и при нажатии кнопки отправить нажмите на цель, установленную на представление, чтобы я мог выполнить некоторую проверку. Это отлично работает до такой степени, что мне нужно что-то делать с полями, в которых есть ошибки. Я хотел бы просто добавить класс в поле erro, но не совсем уверен, как это сделать.

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

<div class="controls" {{bindAttr class=firstNameError:error:success}}> 
    {{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}} 
</div> 

Так с этим на месте добавить firstNameError свойство, которое возвращает истина/ложь в зависимости от результатов вашей проверки. Учитывая вашу реализацию, вероятно, имеет смысл установить это свойство при запуске _validate, но также может быть вычисленным свойством, которое выполняет валидацию в режиме реального времени.

Должен ли IndexView проверять форму или мне нужно создать представление для каждого поля, которое проверяет самосогласование?

Это действительно зависит от того, как вы хотите, чтобы пользовательский интерфейс выглядел как. FWIW мой голос - пойти с размытым.