使用RxJS创建可过滤列表

Question

我正试图进入反应式编程.我使用数组函数,如map,filter和减少所有的时间,并且喜欢我可以在不创建状态的情况下进行数组操作.

作为练习,我试图在不引入状态变量的情况下使用RxJS创建可过滤的列表.最后它应该与此类似:

我会知道如何使用天真的JavaScript或AngularJS/ReactJS来实现这一点,但我正在尝试使用RxJS而不创建状态变量:

var list = [
  'John',
  'Marie',
  'Max',
  'Eduard',
  'Collin'
];

Rx.Observable.fromEvent(document.querySelector('#filter'), 'keyup')
  .map(function(e) { return e.target.value; });

// i need to get the search value in here somehow:
Rx.Observable.from(list).filter(function() {}); 

现在如何在我从列表中创建的observable中将搜索值放入我的过滤器函数中？

非常感谢你的帮助!

Answer 1

from(list)每次更改过滤器时,您都需要包装以重新启动列表observable.由于这种情况可能会发生很多,因此您可能还希望在过滤器太短时防止过滤,或者在较小的时间范围内存在另一个击键.

//This is a cold observable we'll go ahead and make this here
var reactiveList = Rx.Observable.from(list);

//This will actually perform our filtering
function filterList(filterValue) {
  return reactiveList.filter(function(e) {
   return /*do filtering with filterValue*/;
  }).toArray();
}


var source = Rx.Observable.fromEvent(document.querySelector('#filter'), 'keyup')
  .map(function(e) { return e.target.value;})

  //The next two operators are primarily to stop us from filtering before 
  //the user is done typing or if the input is too small
  .filter(function(value) { return value.length > 2; })
  .debounce(750 /*ms*/)

  //Cancel inflight operations if a new item comes in.
  //Then flatten everything into one sequence
  .flatMapLatest(filterList);

//Nothing will happen until you've subscribed
source.subscribe(function() {/*Do something with that list*/});

这都是改编自于RxJS标准的一个例子在这里