ember検索入力のデバウンス

Question

emberアプリケーションの検索入力にdebounceを追加したいと思います。 debounce methodの使用に問題があります。

ここに私の検索がどのように見えるかです：

{{input type="search" 
     placeholder="Search by XYZ" 
     value=search 
     id="search" 
}} 

マイルートファイル：

export default Ember.Route.extend({ 
    queryParams: { 
    search:{refreshModel: true} 
} 

私のコントローラファイル：

export default Ember.Controller.extend({ 
    search: "", 

Answer 1

は、既存の入力ヘルパーでデバウンスご希望の振る舞いを実装がありますすぐに値を更新するので非常に困難です。

1. だから私は、通常の入力html要素を使用して、聞いて、手動でデバウンスメソッド内の値を設定するには、keyUpイベントを使用することをお勧めします。デモンストレーション用

コントローラ内部

、

import Ember from 'ember'; 
export default Ember.Controller.extend({ 
    queryParams:['easyFilter'], 
    easyFilter:'', 
    setEasyFilterLazily(value){ 
    this.set('easyFilter',value); 
    }, 
    actions:{  
    handleEasyFilterEntry(value){ 
     Ember.run.debounce(this, this.setEasyFilterLazily,value, 500); 
    } 
    } 
}); 

Created twiddle。

2. さらに興味深いオプションは、ember-concurrency addonを使用しています。 は、このタスクがrestartableであるとして、あなたが1000ミリ秒以内の高速入力するときに、それが再起動されます

<input type="text" value={{filterValue}} oninput={{perform triggerToUpdateFilter value='target.value'}}>

と

triggerToUpdateFilter: task(function*(value) { 
    yield timeout(1000); //here it will wait for 1000 ms before setting 
    this.set('easyFilter',value); 
}).restartable(), 

、ヘルパーの代わりに、アクションヘルパーを行う使用する必要があります。