xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="mount">
<button id="decrement">-</button>
<label id="count"></label>
<button id="increment">+</button>
</div>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/rx.js"></script>
<script id="jsbin-javascript">
document.addEventListener('DOMContentLoaded', () => {
let increment = document.querySelector('#increment'),
decrement = document.querySelector('#decrement'),
count = document.querySelector('#count');
let increment$ = Rx.Observable
.fromEvent(increment, 'click')
.map(e => 1);
let decrement$ = Rx.Observable
.fromEvent(decrement, 'click')
.map(e => -1);
let count$ = Rx.Observable
.empty()
.defaultIfEmpty(0)
.merge(increment$, decrement$)
.scan((acc, curr) => acc + curr, 0)
count$.subscribe(data => {
count.textContent = data
})
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">document.addEventListener('DOMContentLoaded', () => {
let increment = document.querySelector('#increment'),
decrement = document.querySelector('#decrement'),
count = document.querySelector('#count');
let increment$ = Rx.Observable
.fromEvent(increment, 'click')
.map(e => 1);
let decrement$ = Rx.Observable
.fromEvent(decrement, 'click')
.map(e => -1);
let count$ = Rx.Observable
.empty()
.defaultIfEmpty(0)
.merge(increment$, decrement$)
.scan((acc, curr) => acc + curr, 0)
count$.subscribe(data => {
count.textContent = data
})
})
</script></body>
</html>
Updated missing url https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js to https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/rx.js
https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js