RxJS birçok giriş akışı. Onlarla başa çıkmak için uygun yol?

Question

Uygulamamda beş girdim var ve bunların her birinin toplamını son bir sayı olarak hesaplamak istiyorum.

Şimdiye kadar Bunu yapan: iyi çalışıyor ... ama bunların hepsi belirtmeden her girişin değerlerini almak için herhangi bir daha zarif bir yolu yoktur edilir

const input1 = document.querySelector("#text1"); 
const input2 = document.querySelector("#text2"); 
const input3 = document.querySelector("#text3"); 
const input4 = document.querySelector("#text4"); 
const input5 = document.querySelector("#text5"); 

function setObservable(selector) { 
    return Rx.Observable 
     .fromEvent(selector, "input") 
     .map(event => parseInt(event.target.value)) 
     .startWith(0) 
} 

const input$ = setObservable(input1) 
const input2$ = setObservable(input2) 
const input3$ = setObservable(input3) 
const input4$ = setObservable(input4) 
const input5$ = setObservable(input5) 


const source = Rx.Observable.combineLatest(input$, input2$, input3$, input4$, input5$) 

source.subscribe(value => { 
    const totalHTML = document.querySelector(".total"); 
    const total = value.reduce((acc, curr) => acc + curr, 0); 

    totalHTML.textContent = total; 
}); 

?

Answer 1

Elbette! en dizideki tüm seçicileri saklamak edelim:

const selectors = ['#text1', '#text2', '#text3', '#text4', '#text5']; 

Ve gerçek unsurları almak için bu üzerinde haritasına bakalım:

const elements = selectors.map(s => document.querySelector(s)); 

Ve şimdi bu unsurlar üzerinde haritasına izin vermedi ve Gözlenebilirler dizisini almak:

(önceki gibi)

const clickStreams = elements.map(setObservable); 

Ve nihayet en son birleştirebilirsiniz:

const click$ = Rx.Observable.combineLatest(clickStreams);