Falscher Ablauf von Ereignissen mit FlightJS

Question

Ich versuche herauszufinden, ein bestimmtes div wird angezeigt, bevor ein Ereignis ausgelöst wird, angegeben von FlightJs Funktionen.

Wie Sie sehen können, nachdem ich die Initialisierung erkannt habe, habe ich das Ereignis on click für onSubmitButtonClicked angegeben.

In der onSubmitButtonClicked Funktion sammle ich den Feldwert und übergeben es Handler in der mixin Form 'angegeben anfordern, die wie folgt aussieht:

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; 
}); 

Das Problem ist, dass die showSuccessMessage() Funktion rechts abgefeuert wird nach der Initialisierung eher nach dem Warten auf Submitbuttonclicked. Ist die Verkettung der Rückrufe fehler- und inkorrekt oder liegt sonst etwas falsch am Code?

Answer 1

Unter der Annahme, dass Sie eine funktionierende require.js/webpack Config irgendwo, Sie verwenden keine CSS-Klasse die Nachrichtenelemente und Markup sieht so etwas zu verbergen:

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

Ich würde sagen, Sie sind fehlt nur, um die Nachrichtenelemente im Ereignis initialize auszublenden.

Es soll wie folgt aussehen:

// ... 
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(); 
}); 
// ... 

ich ein fiddle gemacht, wo Sie einen Blick haben.