Подтвердить что ты не робот

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

Мне просто интересно, какой общий шаблон для проверки форм в 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 = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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>
4b9b3361

Ответ 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, которое возвращает true/false в зависимости от результатов вашей проверки. Учитывая вашу реализацию, вероятно, имеет смысл установить это свойство, когда выполняется _validate, но также может быть вычисленным свойством, которое выполняет проверку в реальном времени.

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

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