处理 ember 中的输入键事件

Question

我的 application.It 中有一个组件有一个带有文本的表单 fields.It 将有一个提交 button.When 提交被按下它将发送一个 post 请求到server.I 还在组件 js 中处理了一个键盘事件 file.When enter is pressed 它将发送一个 post 请求到 server.When enter 键被连续按下两次它正在制作两个post 请求服务器，第一次请求成功，第二次请求失败。即使用户连续两次按下回车键，我也想让我的应用程序如此，它应该只向 server.Can 发送一个 post 请求，任何人都可以帮助我解决这个 issue.Thanks提前。

组件js文件：

export default Component.extend({
  keyDown:function(event){
            let self = this;
            if(event.keyCode === 13){
              self.send('submitform'); 
              return false;
  }
  actions: {
             submitform(){
             //logic to handle the post request to the server    
  }   
}

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 中的输入键事件

Handling enter key event in ember

ember.js

ember-cli