Marionette js 3+：検証が失敗したときの状況を処理する責任はありますか？

Question

登録フォームの見方があります。データを入力して登録ボタンをクリックすると、モデルが作成され、model.save（）の後で検証が開始されます。検証が失敗したとき、マークのフォーム入力はhas-error

として私のコード：

アイデア ビュー

class App.Views.RegisterView extends Marionette.View 
    template: _.template(App.Templates['regFormTpl.ejs']) 
    ui: 
     registrate: '#reg-button' 

    events: 
     'click @ui.registrate': 'customerRegistration' 

    customerRegistration: (e) -> 
     e.preventDefault() 

     regData = new App.Models.RegData 
      login: $('#login').val() 
      email: $('#email').val() 
      password: $('#password').val() 
      confirmPassword: $('#password_confirm').val() 


     if regData.save() 
      console.log ('done') 
     else 
      console.log ('false') 

モデル

class App.Models.RegData extends Backbone.Model 
    urlRoot: '/someurl' 

    defaults: 
     login: '' 
     email: '' 
     password: '' 
     confirmPassword: '' 

    validate: (attrs) -> 
     console.log(attrs) 

     errors = {} 

     if attrs.login.length < 5 
      errors.username = 'error desc' 

     if attrs.password != attrs.confirmPassword 
      errors.password = 'error desc' 

     unless _.isEmpty(errors) 
      return errors 

私は疑問を持って、その責任について処理します検証が失敗した場合の状況

私はこのフレームワークの開発に経験がありません。ガイドを読んでいるうちに...早く見たのがイベントを引き起こすコントローラーでした。

Mn 3+コントローラーを除去した。

Answer 1

DOMエレメントへのアクセス権があるため、フォーム内のエラーの表示を処理する役割を果たす「表示」自体を使用することができます。

この例では、フォーム内のフィールドとエラーマップのフィールドが一致する必要があります。最終的には、これらの2つの方法が同様に、他のビューにロジックを再利用できるようにするMarionette.Behaviorに委任することができる

customerRegistration: (e) -> 
    ... 
    // remove previous errors 
    this.cleanFormErrors(); 

    if (!regData.isValid()) { 
    _.each(regData.validationError, fieldName => this.showFormError(fieldName)); 
    } 
    ... 
showFormError: (fieldId) -> 
    this.$el('[#' + fieldId + ']').addClass('has-error'); 

cleanFormErrors:() -> 
    this.$el.find('.has-error').removeClass('has-error'); 

：ここ

class App.Behaviors.DisplayErrors extends Marionette.Behavior 
    onShowFormError: (fieldId) -> 
    this.$el('[#' + fieldId + ']').addClass('has-error'); 

    onCleanFormErrors:() -> 
    this.$el.find('.has-error').removeClass('has-error'); 

は行動を使用して変更ビューコードです：

class App.Views.RegisterView extends Marionette.View 
    behaviors: { 
    'errorsBehavior': { 
     'behaviorClass': App.Behaviors.DisplayErrors 
    } 
    } 
    customerRegistration: (e) -> 
    ... 
    this.triggerMethod('clean:form:errors'); 
    if (!regData.isValid()) { 
    _.each(regData.validationError, fieldName => this.triggerMethod("show:form:errors")); 
    } 
    ... 

これはあなたの質問を解決するためにあなたを導くことができますように願っています。