用RxJS創建一個可過濾的列表

Question

我試圖進入反應式編程。我使用數組函數（如map，filter和reduce）來減少所有的時間，並且愛我可以在不創建狀態的情況下進行數組操作。

作爲一個練習，我試圖用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() {}); 

現在我如何才能搜索到的值我的過濾功能可觀測，我從我的列表中創建？

非常感謝您的幫助！

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 here

Answer 2

你可以看看我是如何做到在這裏： https://github.com/erykpiast/autocompleted-select/

它的端到端解決方案，以抓住用戶交互和將過濾的列表呈現給DOM。

Answer 3

你也可以看看WebRx's List-Projections。

Live-Demo

披露：我是框架的作者。

Answer 4

您可以創建一個新的流，它將人員和鍵盤輸入流的列表合併到一起，並進行掃描以過濾後者。

const keyup$ = Rx.Observable.fromEvent(_input, 'keyup') 
    .map(ev => ev.target.value) 
    .debounce(500); 

const people$ = Rx.Observable.of(people) 
    .merge(keyup$) 
    .scan((list, value) => people.filter(item => item.includes(value))); 

這樣，您將有：

-L ------------------人名單

------ķ -----ķ - K ---- keyups流

-L ---- -----ķķ - K ----合併流

然後你就可以對其進行掃描。作爲文檔說：

Rx.Observable.prototype.scan（累加器，[種子]）

適用在可觀察到的序列累加器函數並返回每個 中間結果。

這意味着您將能夠過濾列表，將新列表存儲在累加器上。

一旦你訂閱，數據將成爲新的列表。

people$.subscribe(data => console.log(data)); //this will print your filtered list on console 

希望它可以幫助/足夠

明確