Question

我想在ember应用中为我的搜索输入添加去抖动。我在使用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

使用现有的输入助手实现所需的行为去抖是非常困难的，因为它会立即更新值。

所以我鼓励你使用普通的输入html元素并使用keyUp事件来监听并在debounce方法中手动设置值。

内部控制器，

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用于演示。

另一个有趣的选项是使用ember-concurrency addon。需要使用perform helper而不是action helper，

<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(),

由于此任务为restartable，因此当您在1000毫秒内快速键入时，它将重新启动。

Answer 2

search: computed('', {
  set(key, value) {
    debounce(this, this.setValue, value, 500);
  }
})

这对我有用，看起来像是覆盖了默认的搜索设置器。

宣布余烬搜索输入

2 个答案: