combineLatest - 3

RxJS 5 combineLatest

by Brian Troncone

HTML

<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.8/dist/global/Rx.umd.js"></script>
<div>
  <button id='red'>Red</button>
  <button id='black'>Black</button>
</div>
<div>Red: <span id="redTotal"></span> </div>
<div>Black: <span id="blackTotal"></span> </div>
<div>Total: <span id="total"></span> </div>

JavaScript

// helper function to set HTML
const setHtml = id => val => document.getElementById(id).innerHTML = val;

const addOneClick$ = id => Rx.Observable
    .fromEvent(document.getElementById(id), 'click')
    // map every click to 1
    .mapTo(1)
    .startWith(0)
    // keep a running total
    .scan((acc, curr) => acc + curr)
    // set HTML for appropriate element
    .do(setHtml(`${id}Total`))
  
  
const combineTotal$ = Rx.Observable
  .combineLatest(
    addOneClick$('red'),
    addOneClick$('black')
  )
  .map(([val1, val2]) => val1 + val2)
  .subscribe(setHtml('total'));