damianbaar/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-alpha.8/dist/global/Rx.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="test1" style="width:200px;height:100px;background:#DDEEFF" >20</div>
  <div id="test2" style="width:200px;height:100px;background:#DDDDFF;" >10</div>
  <div id="sum"></div>
  <input id="input1" />
  <input id="input2" />
  <div id="inputSum"></div>
</div>
<script id="jsbin-javascript">
////////////////////////////////////
////////////////////////////////////

'use strict';

var a = Rx.Observable.fromEvent(document.querySelector('#test1'), 'click'),
    b = Rx.Observable.fromEvent(document.querySelector('#test2'), 'click');

var lazyDataSource = Rx.Observable.interval(100).take(1).map(function (x) {
  return 1;
});

var sum = document.querySelector('#sum');

var onData = a.map(function (x) {
  return 20;
}).merge(b.map(function (x) {
  return 10;
}), lazyDataSource);

onData = onData.startWith(100).scan(function (acc, x, i, source) {
  return acc + x;
}).distinctUntilChanged();
//.publish().refCount() //if delayed streams should take next update

setTimeout(function () {
  var t = onData.map(function (x) {
    return 'yeah' + x;
  });

  setTimeout(function () {
    t.subscribe(function (d) {
      sum.innerHTML = 'delayed stream: ' + d;
      console.log(d);
    });
  }, 1000);
}, 2000);

////////////////////////////////////
////////////////////////////////////

var ie1 = document.querySelector('#input1'),
    ie2 = document.querySelector('#input2');

var i1 = Rx.Observable.fromEvent(ie1, 'input'),
    i2 = Rx.Observable.fromEvent(ie2, 'input'),
    s = document.querySelector('#inputSum');

i1 = i1.map(function (x) {
  return x.target.value;
}).startWith('test');
i2 = i2.map(function (x) {
  return x.target.value;
}).startWith('test');

var ic = Rx.Observable.combineLatest(i1, i2, onData);

var updateInputs = ic.take(1).subscribe(function (val) {
  ie1.value = val[0];
  ie2.value = val[1];
});

ic.subscribe(function (a) {
  s.innerHTML = 'two-way bindings: ' + a.join(' ');
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">////////////////////////////////////
////////////////////////////////////

var a = Rx.Observable.fromEvent(document.querySelector('#test1'), 'click')
  , b = Rx.Observable.fromEvent(document.querySelector('#test2'), 'click')

var lazyDataSource = Rx.Observable.interval(100).take(1).map(x=>1)

var sum = document.querySelector('#sum')

var onData = a
.map(x => 20)
.merge(b.map(x => 10), lazyDataSource)

onData = onData
  .startWith(100)
  .scan((acc, x, i, source)=>acc+x)
  .distinctUntilChanged()
//.publish().refCount() //if delayed streams should take next update


setTimeout(function() {
var t = onData
  .map(x=>'yeah'+x)

  setTimeout(function() {
    t.subscribe(function(d){
      sum.innerHTML = 'delayed stream: ' + d
      console.log(d)
    })
  }, 1000)
}, 2000)

////////////////////////////////////
////////////////////////////////////

var ie1 = document.querySelector('#input1')
  , ie2 = document.querySelector('#input2')

var i1 = Rx.Observable.fromEvent(ie1, 'input')
  , i2 = Rx.Observable.fromEvent(ie2, 'input')
  , s = document.querySelector('#inputSum')

i1 = i1.map(x=>x.target.value).startWith('test')
i2 = i2.map(x=>x.target.value).startWith('test')

var ic = Rx.Observable.combineLatest(i1, i2, onData)

var updateInputs = ic.take(1).subscribe(function(val){
  ie1.value = val[0]
  ie2.value = val[1]
})

ic.subscribe(function(a){
  s.innerHTML = 'two-way bindings: ' + a.join(' ')
})</script></body>
</html>

## jsbin.reyohes.js
////////////////////////////////////
////////////////////////////////////

'use strict';

var a = Rx.Observable.fromEvent(document.querySelector('#test1'), 'click'),
    b = Rx.Observable.fromEvent(document.querySelector('#test2'), 'click');

var lazyDataSource = Rx.Observable.interval(100).take(1).map(function (x) {
  return 1;
});

var sum = document.querySelector('#sum');

var onData = a.map(function (x) {
  return 20;
}).merge(b.map(function (x) {
  return 10;
}), lazyDataSource);

onData = onData.startWith(100).scan(function (acc, x, i, source) {
  return acc + x;
}).distinctUntilChanged();
//.publish().refCount() //if delayed streams should take next update

setTimeout(function () {
  var t = onData.map(function (x) {
    return 'yeah' + x;
  });

  setTimeout(function () {
    t.subscribe(function (d) {
      sum.innerHTML = 'delayed stream: ' + d;
      console.log(d);
    });
  }, 1000);
}, 2000);

////////////////////////////////////
////////////////////////////////////

var ie1 = document.querySelector('#input1'),
    ie2 = document.querySelector('#input2');

var i1 = Rx.Observable.fromEvent(ie1, 'input'),
    i2 = Rx.Observable.fromEvent(ie2, 'input'),
    s = document.querySelector('#inputSum');

i1 = i1.map(function (x) {
  return x.target.value;
}).startWith('test');
i2 = i2.map(function (x) {
  return x.target.value;
}).startWith('test');

var ic = Rx.Observable.combineLatest(i1, i2, onData);

var updateInputs = ic.take(1).subscribe(function (val) {
  ie1.value = val[0];
  ie2.value = val[1];
});

ic.subscribe(function (a) {
  s.innerHTML = 'two-way bindings: ' + a.join(' ');
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-alpha.8/dist/global/Rx.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="test1" style="width:200px;height:100px;background:#DDEEFF" >20</div>
	<div id="test2" style="width:200px;height:100px;background:#DDDDFF;" >10</div>
	<div id="sum"></div>
	<input id="input1" />
	<input id="input2" />
	<div id="inputSum"></div>
	</div>
	<script id="jsbin-javascript">
	////////////////////////////////////
	////////////////////////////////////

	'use strict';

	var a = Rx.Observable.fromEvent(document.querySelector('#test1'), 'click'),
	b = Rx.Observable.fromEvent(document.querySelector('#test2'), 'click');

	var lazyDataSource = Rx.Observable.interval(100).take(1).map(function (x) {
	return 1;
	});

	var sum = document.querySelector('#sum');

	var onData = a.map(function (x) {
	return 20;
	}).merge(b.map(function (x) {
	return 10;
	}), lazyDataSource);

	onData = onData.startWith(100).scan(function (acc, x, i, source) {
	return acc + x;
	}).distinctUntilChanged();
	//.publish().refCount() //if delayed streams should take next update

	setTimeout(function () {
	var t = onData.map(function (x) {
	return 'yeah' + x;
	});

	setTimeout(function () {
	t.subscribe(function (d) {
	sum.innerHTML = 'delayed stream: ' + d;
	console.log(d);
	});
	}, 1000);
	}, 2000);

	////////////////////////////////////
	////////////////////////////////////

	var ie1 = document.querySelector('#input1'),
	ie2 = document.querySelector('#input2');

	var i1 = Rx.Observable.fromEvent(ie1, 'input'),
	i2 = Rx.Observable.fromEvent(ie2, 'input'),
	s = document.querySelector('#inputSum');

	i1 = i1.map(function (x) {
	return x.target.value;
	}).startWith('test');
	i2 = i2.map(function (x) {
	return x.target.value;
	}).startWith('test');

	var ic = Rx.Observable.combineLatest(i1, i2, onData);

	var updateInputs = ic.take(1).subscribe(function (val) {
	ie1.value = val[0];
	ie2.value = val[1];
	});

	ic.subscribe(function (a) {
	s.innerHTML = 'two-way bindings: ' + a.join(' ');
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">////////////////////////////////////
	////////////////////////////////////

	var a = Rx.Observable.fromEvent(document.querySelector('#test1'), 'click')
	, b = Rx.Observable.fromEvent(document.querySelector('#test2'), 'click')

	var lazyDataSource = Rx.Observable.interval(100).take(1).map(x=>1)

	var sum = document.querySelector('#sum')

	var onData = a
	.map(x => 20)
	.merge(b.map(x => 10), lazyDataSource)

	onData = onData
	.startWith(100)
	.scan((acc, x, i, source)=>acc+x)
	.distinctUntilChanged()
	//.publish().refCount() //if delayed streams should take next update


	setTimeout(function() {
	var t = onData
	.map(x=>'yeah'+x)

	setTimeout(function() {
	t.subscribe(function(d){
	sum.innerHTML = 'delayed stream: ' + d
	console.log(d)
	})
	}, 1000)
	}, 2000)

	////////////////////////////////////
	////////////////////////////////////

	var ie1 = document.querySelector('#input1')
	, ie2 = document.querySelector('#input2')

	var i1 = Rx.Observable.fromEvent(ie1, 'input')
	, i2 = Rx.Observable.fromEvent(ie2, 'input')
	, s = document.querySelector('#inputSum')

	i1 = i1.map(x=>x.target.value).startWith('test')
	i2 = i2.map(x=>x.target.value).startWith('test')

	var ic = Rx.Observable.combineLatest(i1, i2, onData)

	var updateInputs = ic.take(1).subscribe(function(val){
	ie1.value = val[0]
	ie2.value = val[1]
	})

	ic.subscribe(function(a){
	s.innerHTML = 'two-way bindings: ' + a.join(' ')
	})</script></body>
	</html>