Tạo danh sách có thể lọc với RxJS

Question

Tôi đang cố gắng tham gia vào chương trình phản ứng. Tôi sử dụng các mảng-chức năng như bản đồ, bộ lọc và giảm tất cả thời gian và tình yêu mà tôi có thể thực hiện thao tác mảng mà không cần tạo trạng thái.

Là một tập thể dục, tôi đang cố gắng để tạo ra một danh sách có thể lọc với RxJS mà không giới thiệu biến trạng thái. Cuối cùng nó cũng làm việc tương tự như sau:

tôi sẽ biết làm thế nào để thực hiện điều này với ngây thơ JavaScript hoặc AngularJS/ReactJS nhưng tôi đang cố gắng để làm được điều này không có gì nhưng RxJS và mà không cần tạo biến trạng thái:

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

Bây giờ làm thế nào để có được giá trị tìm kiếm vào chức năng lọc của tôi trên quan sát mà tôi tạo ra từ danh sách của tôi?

Cảm ơn rất nhiều sự giúp đỡ của bạn!

Answer 1

Bạn sẽ cần phải quấn from(list) vì nó sẽ cần phải khởi động lại danh sách quan sát một lần nữa mỗi khi bộ lọc được thay đổi. Vì điều đó có thể xảy ra rất nhiều, bạn cũng có thể muốn ngăn chặn lọc khi bộ lọc quá ngắn hoặc nếu có một đột quỵ quan trọng khác trong một khung thời gian nhỏ.

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

này được tất cả các chuyển thể từ một trong những ví dụ tiêu chuẩn cho RxJS here

Answer 2

Bạn có thể tìm kiếm làm thế nào tôi đã làm nó ở đây: https://github.com/erykpiast/autocompleted-select/

Đó là dấu chấm hết cho giải pháp kết thúc, với grabbing tương tác người dùng và hiển thị danh sách được lọc thành DOM.

Answer 3

Bạn có thể có một cái nhìn tại WebRx's List-Projections là tốt.

Live-Demo

Tiết lộ: Tôi là tác giả của khung.

Answer 4

Bạn có thể tạo một dòng mới, mà sẽ đưa danh sách những người và dòng keyups, hợp nhất chúng lại và quét để lọc sau này.

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

Bằng cách này bạn sẽ có:

-L ------------------ người liệt kê

------ k ----- k - k ---- keyups stream

-L ---- k ----- k - k ---- dòng đã hợp nhất

Sau đó, bạn có thể quét . Như tài liệu nói:

Rx.Observable.prototype.scan (accumulator, [hạt])

Áp dụng một chức năng ắc qua một chuỗi quan sát và trả mỗi kết quả trung gian .

Điều đó có nghĩa là bạn sẽ có thể lọc danh sách, lưu trữ danh sách mới trên bộ tích lũy.

Khi bạn đăng ký, dữ liệu sẽ là danh sách mới.

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

Hy vọng nó giúp/đủ

rõ ràng