Convalida modulo in EmberJS

Question

Mi chiedo quale sia lo schema generale per la convalida dei moduli in EmberJS? Per il mio App.IndexView ho un modulo e quando si fa clic sul pulsante di invio il target impostato per la visualizzazione in modo da poter fare qualche convalida. Funziona perfettamente fino al punto in cui ho bisogno di fare qualcosa con i campi che hanno errori. Vorrei solo aggiungere una classe ai campi con errori, ma non sono proprio sicuro di come farlo. Se IndexView convalida il modulo o devo creare una vista per ogni campo che convalida la sua auto su sfocatura? Di seguito è quello che ho nel mio 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 

e il modello

<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

Mi chiedo solo quello che il modello generale per la convalida forme in EmberJS?

Sembra che ci siano diversi modelli in uso. Dipende piuttosto da ciò che viene convalidato, con la strategia generale di mantenere la logica di business lontana dal livello di vista possibile. Ecco alcuni link che possono rivelarsi utili:

• validations-in-emberjs-application.html consiglia di eseguire la convalida a livello di controller, con vista vengono utilizzati per attivare la convalida in caso di modifiche di messa a fuoco. Questo screencast dimostra come questo modello può essere usato per convalidare alcuni campi di forma semplici.

• Asynchronous-Form-Field-Validation-With-Ember fornisce alcuni componenti riutilizzabili che possono essere utilizzati per eseguire convalide semplici a livello di vista.

• ember-validations è una libreria che può essere utilizzata per aggiungere funzionalità di validazione stile attivo-registrare a qualsiasi brace-oggetto

Per il mio App.IndexView Ho una forma e quando si fa clic sul submit pulsante il target impostato per la vista in modo da poter fare qualche convalida. Funziona perfettamente fino al punto in cui ho bisogno di fare qualcosa con i campi che hanno errori. Vorrei solo aggiungere una lezione al campo di Erro ma non sono proprio sicuro di come farlo.

dato che si sta tentando di convalidare un numero di campi contemporaneamente potrebbe avere più senso spostare questa logica di convalida nel controller. In entrambi i casi, di solito si dovrebbe associare attributi di classe per un determinato campo a una proprietà come segue:

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

Quindi, con questo in luogo aggiungere un alloggio firstNameError che restituisce vero/falso a seconda dei risultati della vostra convalida. Data la tua implementazione, probabilmente avrebbe senso impostare questa proprietà quando viene eseguito _validate, ma potrebbe anche essere una proprietà calcolata che esegue la convalida in tempo reale.

Se IndexView convalida il modulo o devo creare una vista per ogni campo che convalida la sua auto su sfocatura?

Questo dipende molto da come desideri essere l'esperienza dell'utente. FWIW il mio voto è andare su con sfocatura.