JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap-responsive.min.css""></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.17/rx.lite.compat.min.js"></script>
<div class="container">
<div class="page-header">
<h1>Simple Data Binding Example</h1>
<p class="lead">Show simple concepts of data binding!</p>
</div>
<div class="row-fluid">
<form>
<fieldset>
<legend>First Example Using Simple Binds</legend>
<label id="label1"></label>
<label for="firstName1">First Name</label>
<input id="firstName1" type="text" placeholder="Enter First Name...">
<label for="lastName1">Last Name</label>
<input id="lastName1" type="text" placeholder="Enter Last Name...">
<label for="fullName1">Full Name</label>
<input id="fullName1" type="text">
</fieldset>
</form>
</div>
</div>
JavaScript
// Make a simple binding
var label1 = document.querySelector('#label1');
var hello = new Rx.BehaviorSubject('Hello');
hello.subscribe(function (text) {
label1.textContent = text;
});
// Create simple bindings for first and last name
var firstName1 = new Rx.BehaviorSubject('');
var lastName1 = new Rx.BehaviorSubject('');
// Create first and last name composite
var fullName1 = firstName1.combineLatest(lastName1, function (first, last) {
return first + ' ' + last;
});
// Subscribe to them all
var fn1 = document.querySelector('#firstName1');
firstName1.subscribe(function (text) { fn1.value = text });
var ln1 = document.querySelector('#lastName1');
lastName1.subscribe(function (text) { ln1.value = text });
var full1 = document.querySelector('#fullName1');
fullName1.subscribe(function (text) { full1.value = text });
// Create two way bindings for both first name and last name
Rx.Observable.fromEvent(fn1, 'keyup')
.subscribe(function (e) { firstName1.onNext(e.target.value); })
Rx.Observable.fromEvent(ln1, 'keyup')
.subscribe(function (e) { lastName1.onNext(e.target.value); })