Обработка ввода ключевого события в ember

У меня есть компонент в моем приложении. У него есть форма с текстовыми полями. У него будет кнопка отправки. При отправке будет отправлен запрос на отправку на сервер. Я также обработал событие клавиатуры в компонентах js-файла. При нажатии кнопки он отправит запрос на отправку на сервер. Когда ключ ввода нажат два раза непрерывно, он делает два запроса на отправку на сервер с успехом первого запроса и неудачным вторым запросом. Я хочу сделать свое приложение таким, даже если пользователь нажимает клавишу ввода два раза непрерывно, он должен отправить только один запрос на сервер. Может кто-нибудь помочь мне решить эту проблему. Спасибо заранее.Обработка ввода ключевого события в ember

Компоненты 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  
    } 
}

источник

2017-02-05 bharathwaj ravi

Я рекомендую вам проверить [ember-parallelurrency] (http://ember-concurrency.com). – Lux

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

Вы можете играть с twiddle here

источник

2017-02-05 17:38:03 kumkanillam

В любом случае отключить клавиатурное событие в ember?, Чтобы я мог сначала включить событие на клавиатуре. Когда нажато нажатие, я могу отключить событие клавиатуры. Таким образом, дальнейший запрос на сервер не производится. –

Вы попробовали мой ответ? – kumkanillam

Ya Я пробовал это, но все же, когда я нажимаю Enter дважды непрерывно. Он запускает событие keyDown дважды и метод submitForm дважды и делает два запроса на сервер с первым успехом следующего неудачного. Лучше будет делать, например, при нажатии клавиши ввода в первый раз я могу отключить клавиатурное событие Enter, похожее на кнопки отключения. Так что даже пользователь нажимает Enter непрерывно, первый вход в одиночку подаст запрос на сервер. Есть ли способ сделать это? –

Вы хотите, чтобы отключить submitForm(), пока ваш запрос POST завершена. Вы можете сделать это, установив свойство 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 () => { ... }, чтобы вы могли продолжать использовать this внутри.

источник

2017-02-08 12:41:30

Обработка ввода ключевого события в ember

ответ

Смежные вопросы