Tworzenie filtrowalnej listy z RxJS

Question

Próbuję dostać się do programowania reaktywnego. Używam funkcji tablicowych, takich jak mapa, filtr i zmniejszam cały czas i miłości, że mogę manipulować tablicą bez tworzenia stanu.

Jako ćwiczenie, próbuję utworzyć listę filtrowalną z RxJS bez wprowadzania zmiennych stanu. W końcu to powinno działać podobnie do tego:

Chciałbym wiedzieć, jak to osiągnąć z naiwnej JavaScript lub angularjs/ReactJS ale staram się to zrobić, ale nic z RxJS i bez tworzenia zmienne stanu:

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

teraz jak mogę uzyskać wartość wyszukiwania w mojej funkcji filtra na zaobserwować, że stworzyłem z moim liście?

Bardzo dziękuję za pomoc!

Answer 1

Będziesz musiał owinąć from(list), ponieważ będzie musiał ponownie uruchomić listę obserwowalną ponownie za każdym razem, gdy filtr zostanie zmieniony. Ponieważ może się to zdarzyć bardzo często, prawdopodobnie będziesz chciał zapobiec filtrowaniu, gdy filtr jest zbyt krótki lub jeśli w krótkim czasie wystąpi inny kluczowy skok.

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

To wszystko jest dostosowane z jednym ze standardowych przykładów dla RxJS here

Answer 2

można spojrzeć jak to zrobiłem tutaj: https://github.com/erykpiast/autocompleted-select/

To koniec do roztworu końcowego, z chwytając interakcje użytkownika i renderowanie przefiltrowanej listy do DOM.

Answer 3

Można również przejrzeć WebRx's List-Projections.

Live-Demo

Ujawnienie: Jestem autorem Framework.

Answer 4

Możesz utworzyć nowy strumień, który pobiera listę osób i strumień odnośników, łączy je i skanuje w celu odfiltrowania tego ostatniego.

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

ten sposób będziesz mieć: listy

-L ------------------ ludzie

------ k ----- k - k ---- keyups strumień

-L ---- ----- k k - k ---- połączyła strumień

Wtedy można go zeskanować . Jak Dokumenty mówi:

Rx.Observable.prototype.scan (akumulatorów [nasiona])

Stosuje funkcję akumulatora nad obserwowanej sekwencji i zwraca co wynik pośredni.

Oznacza to, że będziesz mógł filtrować listę, przechowując nową listę na akumulatorze.

Po dokonaniu subskrypcji dane będą nową listą.

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

Nadzieja pomaga/wystarczyło

jasne