JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.js"></script>
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.binding.js"></script>
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.time.js"></script>
<div id="firstName"></div>
<div id="lastname"></div>
<div id="fullName"></div>
JavaScript
function ViewModel() {
this.firstName = new Rx.BehaviorSubject('Bob');
this.lastName = new Rx.BehaviorSubject('Smith');
this.fullName = Rx.Observable.combineLatest(this.firstName, this.lastName,
function (first, last) {
return first + ' ' + last;
});
}
var viewModel = new ViewModel();
// Apply bindings
var firstNameElem = document.getElementById('firstName'),
lastnameElem = document.getElementById('lastname'),
fullNameElem = document.getElementById('fullName');
var firstNameSubscription = viewModel.firstName.subscribe(function (x) { firstNameElem.innerHTML = x; });
var lastNameSubscription = viewModel.lastName.subscribe(function (x) { lastnameElem.innerHTML = x; });
var fullNameSubscription = viewModel.fullName.subscribe(function (x) { fullNameElem.innerHTML = x; });
// Show names changing over time
Rx.Observable.interval(3000 /* ms */)
.take(10)
.subscribe(function (x) {
viewModel.firstName.onNext('Bob' + x);
}, function (err) {
console.log(err);
});
Rx.Observable.interval(2000 /* ms */)
.take(20)
.subscribe(function (x) {
viewModel.lastName.onNext('Smith' + x);
}, function (err) {
console.log(err);
});