Formulaire de validation dans EmberJS

Je me demandais simplement ce que le modèle général pour la validation des formulaires dans EmberJS? Pour mon Application.IndexView j'ai un formulaire et lorsque vous cliquez sur le bouton soumettre l'objectif fixé à la vue afin que je puisse faire la validation de certains. Cela fonctionne très bien jusqu'au moment où j'ai besoin de faire quelque chose avec les champs qui ont des erreurs. Je voudrais juste ajouter une classe pour les champs avec des erreurs, mais pas vraiment sûr de savoir comment faire. Si le IndexView valider le formulaire ou devrais-je créer une vue pour chaque champ qui valide son auto sur le flou? Ci-dessous est ce que j'ai dans mon 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

et le modèle

<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>

source d'informationauteur Chad | 2013-01-30