FlightJSを使用したイベントの流れが正しくない

Question

FlightJs関数で指定されたイベントが発生する前に特定のdivが表示されている問題を解明しようとしています。

define([ 
    'flight', 
    'mixins/form' 
], function(flight, formMixin) { 

    function forgotPasswordForm() { 
    this.attributes({ 
     submitButtonSelector: '.btn-submit', 
     formSelector: '#forgot-password', 
     successMessageSelector: '.success-message', 
     successMessageEmailSelector: '.success-message span.success-email', 
     emailInputSelector: '#forgot-password #email', 
     errorSelector: '#forgot-password .error-message' 
    }); 

    this.after('initialize', function() { 
     this.on('click', { 
     'submitButtonSelector': this.onSubmitButtonClicked 
     }); 
     this.on('keyup keypress', { 
     'formSelector': this.onFormKeyUp 
     }); 
    }); 

    this.onFormKeyUp = function(event) { 
     // Capture and deal with "Enter" key being pressed. 
     var keyCode = event.keyCode || event.which; 
     if (keyCode == 13) { 
     event.preventDefault(); 
     this.onSubmitButtonClicked(); 
     return false; 
     } 
    }; 

    this.onSubmitButtonClicked = function(event) { 
     var email = this.select('emailInputSelector').val(); 
     if (email.length > 0) { 
     this.select('errorSelector').hide(); 
     this.postForm(this.select('formSelector')) 
     // Show success message on error to hide malicious password resetting. 
      .error(this.showSuccessMessage(email)) 
      .done(this.showSuccessMessage(email)); 
     } else { 
     this.select('errorSelector').show(); 
     } 
    }; 

    this.showSuccessMessage = function(email) { 
     this.select('successMessageSelector').show(); 
     this.select('successMessageEmailSelector').text(email); 
    }; 
    } 

    flight.component(forgotPasswordForm, formMixin).attachTo('.forgot-password-form'); 
}); 

ご覧のとおり、初期化を検出した後、onSubmitButtonClickedのon clickイベントを指定しました。

私はフィールドの値を収集し、このようになりますミックスイン「形式」で指定されたハンドラを要求するためにそれを渡すonSubmitButtonClicked機能で：

define([], function() { 
    'use strict'; 

    function formMixin() { 
    /* 
    * Use an existing form to post data asynchronously, in order to avoid 
    * hard coding URLs and data transformation on Javascript. 
    */ 
    this.postForm = function($form) { 
     return $.ajax({ 
     type: $form.attr('method'), 
     url: $form.attr('action'), 
     data: $form.serialize() 
     }); 
    }; 
    } 

    return formMixin; 
}); 

問題がshowSuccessMessage()機能が権利をオフに解雇されていることです初期化後、Submitbuttonclickedを待ってからである。エラーのコールバックの連鎖は間違っているのでしょうか、コードに何か間違っていますか？

<div class="forgot-password-form"> 
    <form id="forgot-password" method="GET" 
    action="https://jsonplaceholder.typicode.com/comments"> 
    <input id="email"> 
    <div class="error-message"> 
     Error! 
    </div> 
    </form> 
    <button class="btn-submit"> 
    Submit 
    </button> 

    <div class="success-message"> 
    Success! 
    </div> 
</div> 

私はあなたが言う：あなたが働いてrequire.js/WebPACKの設定のどこかで、あなたがメッセージ要素を非表示にする任意のCSSクラスを使用していないしていると、あなたのマークアップは次のようになりますと仮定すると

Answer 1

メッセージが表示されないようにするには、initializeイベントのメッセージ要素を非表示にします。

それは次のようになります。

// ... 
this.after('initialize', function() { 
    this.on('click', { 
    'submitButtonSelector': this.onSubmitButtonClicked 
    }); 
    this.on('keyup keypress', { 
    'formSelector': this.onFormKeyUp 
    }); 
    this.select('successMessageSelector').hide(); 
    this.select('errorSelector').hide(); 
}); 
// ... 

は、私はあなたが見ることができ fiddleを作りました。