0

我试图找出一个特定的 div 在触发事件之前出现的问题，由 FlightJs 函数指定。

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 函数中，我收集字段值并将其传递给 mixin 'form' 中指定的请求处理程序，如下所示：

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 之后。错误回调的链接和执行不正确还是代码有其他问题？

4

1 回答 1

1

假设你在某处有一个工作的 require.js / webpack 配置，你没有使用任何 CSS 类来隐藏消息元素，你的标记看起来像这样：

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

我想说您只是缺少隐藏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();
});
// ...

我做了一个小提琴，你可以看看。

于 2017-06-27T07:54:16.903 回答