search - 去抖动 ember 搜索输入

Question

我想在 ember 应用程序中为我的搜索输入添加去抖动功能。我在使用debounce 方法时遇到问题。

这是我的搜索的样子：

{{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 事件来监听并在 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);
    }
  }
});

为演示创建了旋转。

2. 另一个有趣的选项是使用ember-concurrency addon。需要使用执行助手而不是动作助手，

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

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