처리 ember에 키 이벤트를 입력하십시오

Question

내 application.It에있는 구성 요소가 텍스트 fields.It과 함께 양식을 가지고 제출 버튼이 있습니다. 제출 누르면 서버에 게시물 요청을 보내드립니다. 나는 또한 처리 Enter 키를 누르면 서버에 게시물 요청을 보냅니다. Enter 키를 두 번 연속 누르면 첫 번째 요청 성공과 두 번째 요청이 실패한 서버에 두 개의 게시물 요청이 이루어집니다. 사용자가 Enter 키를 두 번 연속 눌러도 앱이 멀리 떨어져 있어도 서버에 한 번만 게시물 요청을 보내야합니다.이 문제를 해결할 수있는 사람이있을 수 있습니다. 미리 감사드립니다.

구성 요소 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

해보십시오 usig 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 
    } 
}); 

당신은 당신은 당신의 POST 요청이 완료 될 때까지 submitForm()을 사용하지 않을 것입니다 twiddle here

Answer 2

로 재생할 수 있습니다. 구성 요소에 submitting 특성을 설정하고 POST 전에 전원을 켜고 약속이 해결되면이를 해제하여이를 수행 할 수 있습니다. 아마도 뭔가를 시도 :

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 화살표 기능 () => { ... }을 사용하십시오.