Question

我的应用程序中有一个组件。它有一个带有文本字段的表单。它将有一个提交按钮。当按下提交时，它将向服务器发送一个帖子请求。我还处理组件js文件中的键盘事件。当按下enter键时，它会向服务器发送一个post请求。当连续按两次enter键时，它会向服务器发出两个post请求，第一次请求成功，第二次请求失败。即使用户连续两次按下回车键，我也想让我的应用程序离开，它应该只向服务器发送一个帖子请求。任何人都可以帮我解决这个问题。谢谢。

组件js文件：

Bar

Answer 1

尝试使用Ember.run.debounce，

export default Ember.Component.extend({
    keyDown: function(event) {
        let self = this;
        if (event.keyCode === 13) {
            // self.send('submitform');
            Ember.run.debounce(self,self.get('submitform'),400);
            return false;
        }
    },
    submitform(){
        //handle submit form logic
    }
});

您可以使用twiddle here

Answer 2

在POST请求完成之前，您需要禁用submitForm()。您可以通过在组件上设置属性submitting并在POST之前将其打开，并在解决了promise之后关闭。也许尝试类似的事情：

export default Ember.Component.extend({
  submitting: false,
  keyDown: function(event) {
    if (event.keyCode === 13) {
      this.submitform();
    }
  },
  submitform() {
    // Run only if not currently submitting
    if (!this.get('submitting')) {
      // What to do when submit succeeds
      const success = () => {
        this.set('submitting', false);
      }
      // What to do when submit fails
      const fail = () => {
        this.set('submitting', false);
      }
      // Do the POST request
      this.set('submitting', true);
      this.get('someModel').save().then(success).catch(fail);
    };
  }
});

而且，无关紧要，只要POST承诺尚未解决，您就可以使用模板进行有趣的操作，例如禁用和设置提交按钮样式：

<button {{action 'submitForm'}} disabled={{submitting}} class="{{if submitting 'loading'}}">
  {{#if submitting}}
    Submitting ...
  {{else}}
    Submit
  {{/if}}
</button>

哦，最后，不再需要使用let self = this;了。请改用ES6箭头函数() => { ... }，以便继续使用this。

处理在ember中输入键事件

2 个答案: