Skip to content

Instantly share code, notes, and snippets.

@byteshiva

byteshiva/index.html

Created July 4, 2018 04:50
Show Gist options
  • Save byteshiva/97d62d535d339c986d7292cb8931e4cb to your computer and use it in GitHub Desktop.
Save byteshiva/97d62d535d339c986d7292cb8931e4cb to your computer and use it in GitHub Desktop.
Download ZIP
combineLatest // source https://jsbin.com/buridepaxi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>combineLatest</title>
<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
</head>
<body>
<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>
<script id="jsbin-javascript">
"use strict";
var setHtml = function (id) { return function (val) { return document.getElementById(id).innerHTML = val; }; };
var addOneClick$ = function (id) { return Rx.Observable
.fromEvent(document.getElementById(id), 'click')
.mapTo(1)
.startWith(0)
.scan(function (acc, curr) { return acc + curr; }, 0)
.do(setHtml(id + "Total")); };
var combineTotal$ = Rx.Observable
.combineLatest(addOneClick$('red'), addOneClick$('black'))
.map(function (_a) {
var val1 = _a[0], val2 = _a[1];
return val1 + val2;
})
.subscribe(setHtml('total'));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsSUFBTSxPQUFPLEdBQUcsVUFBQSxFQUFFLElBQUksT0FBQSxVQUFBLEdBQUcsSUFBSSxPQUFBLFFBQVEsQ0FBQyxjQUFjLENBQUMsRUFBRSxDQUFDLENBQUMsU0FBUyxHQUFHLEdBQUcsRUFBM0MsQ0FBMkMsRUFBbEQsQ0FBa0QsQ0FBQztBQUN6RSxJQUFNLFlBQVksR0FBRyxVQUFBLEVBQUUsSUFBSSxPQUFBLEVBQUUsQ0FBQyxVQUFVO0tBQ3RDLFNBQVMsQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQztLQUM1QyxLQUFLLENBQUMsQ0FBQyxDQUFDO0tBQ1IsU0FBUyxDQUFDLENBQUMsQ0FBQztLQUNaLElBQUksQ0FBQyxVQUFDLEdBQUcsRUFBRSxJQUFJLElBQUssT0FBQSxHQUFHLEdBQUcsSUFBSSxFQUFWLENBQVUsRUFBRSxDQUFDLENBQUM7S0FDbEMsRUFBRSxDQUFDLE9BQU8sQ0FBSSxFQUFFLFVBQU8sQ0FBQyxDQUFDLEVBTEgsQ0FLRyxDQUFBO0FBRzlCLElBQU0sYUFBYSxHQUFHLEVBQUUsQ0FBQyxVQUFVO0tBQ2pDLGFBQWEsQ0FDYixZQUFZLENBQUMsS0FBSyxDQUFDLEVBQ2IsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUMzQjtLQUNHLEdBQUcsQ0FBQyxVQUFDLEVBQVk7UUFBWCxZQUFJLEVBQUUsWUFBSTtJQUFNLE9BQUEsSUFBSSxHQUFHLElBQUk7QUFBWCxDQUFXLENBQUM7S0FDbEMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3Qgc2V0SHRtbCA9IGlkID0+IHZhbCA9PiBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChpZCkuaW5uZXJIVE1MID0gdmFsO1xuY29uc3QgYWRkT25lQ2xpY2skID0gaWQgPT4gUnguT2JzZXJ2YWJsZVxuXHQuZnJvbUV2ZW50KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGlkKSwgJ2NsaWNrJylcbiAgICAubWFwVG8oMSlcbiAgICAuc3RhcnRXaXRoKDApXG4gICAgLnNjYW4oKGFjYywgY3VycikgPT4gYWNjICsgY3VyciwgMClcbiAgICAuZG8oc2V0SHRtbChgJHtpZH1Ub3RhbGApKVxuICBcbiAgXG5jb25zdCBjb21iaW5lVG90YWwkID0gUnguT2JzZXJ2YWJsZVxuXHQuY29tYmluZUxhdGVzdChcblx0XHRhZGRPbmVDbGljayQoJ3JlZCcpLFxuICAgICAgICBhZGRPbmVDbGljayQoJ2JsYWNrJylcblx0KVxuICAgIC5tYXAoKFt2YWwxLCB2YWwyXSkgPT4gdmFsMSArIHZhbDIpXG4gICAgLnN1YnNjcmliZShzZXRIdG1sKCd0b3RhbCcpKSJdfQ==
</script>
<script id="jsbin-source-javascript" type="text/javascript">const setHtml = id => val => document.getElementById(id).innerHTML = val;
const addOneClick$ = id => Rx.Observable
.fromEvent(document.getElementById(id), 'click')
.mapTo(1)
.startWith(0)
.scan((acc, curr) => acc + curr, 0)
.do(setHtml(`${id}Total`))
const combineTotal$ = Rx.Observable
.combineLatest(
addOneClick$('red'),
addOneClick$('black')
)
.map(([val1, val2]) => val1 + val2)
.subscribe(setHtml('total'))</script></body>
</html>
Raw
jsbin.buridepaxi.js
"use strict";
var setHtml = function (id) { return function (val) { return document.getElementById(id).innerHTML = val; }; };
var addOneClick$ = function (id) { return Rx.Observable
.fromEvent(document.getElementById(id), 'click')
.mapTo(1)
.startWith(0)
.scan(function (acc, curr) { return acc + curr; }, 0)
.do(setHtml(id + "Total")); };
var combineTotal$ = Rx.Observable
.combineLatest(addOneClick$('red'), addOneClick$('black'))
.map(function (_a) {
var val1 = _a[0], val2 = _a[1];
return val1 + val2;
})
.subscribe(setHtml('total'));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsSUFBTSxPQUFPLEdBQUcsVUFBQSxFQUFFLElBQUksT0FBQSxVQUFBLEdBQUcsSUFBSSxPQUFBLFFBQVEsQ0FBQyxjQUFjLENBQUMsRUFBRSxDQUFDLENBQUMsU0FBUyxHQUFHLEdBQUcsRUFBM0MsQ0FBMkMsRUFBbEQsQ0FBa0QsQ0FBQztBQUN6RSxJQUFNLFlBQVksR0FBRyxVQUFBLEVBQUUsSUFBSSxPQUFBLEVBQUUsQ0FBQyxVQUFVO0tBQ3RDLFNBQVMsQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQztLQUM1QyxLQUFLLENBQUMsQ0FBQyxDQUFDO0tBQ1IsU0FBUyxDQUFDLENBQUMsQ0FBQztLQUNaLElBQUksQ0FBQyxVQUFDLEdBQUcsRUFBRSxJQUFJLElBQUssT0FBQSxHQUFHLEdBQUcsSUFBSSxFQUFWLENBQVUsRUFBRSxDQUFDLENBQUM7S0FDbEMsRUFBRSxDQUFDLE9BQU8sQ0FBSSxFQUFFLFVBQU8sQ0FBQyxDQUFDLEVBTEgsQ0FLRyxDQUFBO0FBRzlCLElBQU0sYUFBYSxHQUFHLEVBQUUsQ0FBQyxVQUFVO0tBQ2pDLGFBQWEsQ0FDYixZQUFZLENBQUMsS0FBSyxDQUFDLEVBQ2IsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUMzQjtLQUNHLEdBQUcsQ0FBQyxVQUFDLEVBQVk7UUFBWCxZQUFJLEVBQUUsWUFBSTtJQUFNLE9BQUEsSUFBSSxHQUFHLElBQUk7QUFBWCxDQUFXLENBQUM7S0FDbEMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3Qgc2V0SHRtbCA9IGlkID0+IHZhbCA9PiBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChpZCkuaW5uZXJIVE1MID0gdmFsO1xuY29uc3QgYWRkT25lQ2xpY2skID0gaWQgPT4gUnguT2JzZXJ2YWJsZVxuXHQuZnJvbUV2ZW50KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGlkKSwgJ2NsaWNrJylcbiAgICAubWFwVG8oMSlcbiAgICAuc3RhcnRXaXRoKDApXG4gICAgLnNjYW4oKGFjYywgY3VycikgPT4gYWNjICsgY3VyciwgMClcbiAgICAuZG8oc2V0SHRtbChgJHtpZH1Ub3RhbGApKVxuICBcbiAgXG5jb25zdCBjb21iaW5lVG90YWwkID0gUnguT2JzZXJ2YWJsZVxuXHQuY29tYmluZUxhdGVzdChcblx0XHRhZGRPbmVDbGljayQoJ3JlZCcpLFxuICAgICAgICBhZGRPbmVDbGljayQoJ2JsYWNrJylcblx0KVxuICAgIC5tYXAoKFt2YWwxLCB2YWwyXSkgPT4gdmFsMSArIHZhbDIpXG4gICAgLnN1YnNjcmliZShzZXRIdG1sKCd0b3RhbCcpKSJdfQ==
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment