Example of how to implement two way data-binding using rxjs.
A Pen by Radoslaw Scheibinger on CodePen.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.24/rx.all.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.js"></script> | |
<input type="text"/> | |
<label class="for-text"></label> | |
<select> | |
<option value="">please select</option> | |
<option value="1">red</option> | |
<option value="2">blue</option> | |
</select> | |
<label class="for-select"></label> | |
<div class='valid-indicator' style='color:green'>valid</div> | |
<p class="log"></p> | |
<script src="main.js" type="text/javascript"></script> |
Example of how to implement two way data-binding using rxjs.
A Pen by Radoslaw Scheibinger on CodePen.
$(function(){ | |
window.model = { | |
name:new Rx.BehaviorSubject(""), | |
color:new Rx.BehaviorSubject("") | |
} | |
function log(value){ | |
var $log = $("p.log"); | |
$log.append("<div>"+value+"</div>"); | |
} | |
function InputWidget(model){ | |
var $input = $("input"); | |
var $label = $("label.for-text"); | |
var inputObservable = $input.keyupAsObservable() | |
.throttle(500) | |
.map(function(ev){ | |
return ev.target.value; | |
}); | |
function render(value){ | |
$input.val(value); | |
$label.text(value); | |
} | |
model.subscribe(function(value){ | |
log("name model.subscribe fired with: "+value+""); | |
render(value); | |
}) | |
inputObservable.subscribe(function(value){ | |
log("inputObservable.subscribe fired with: "+value+""); | |
model.onNext(value); | |
}) | |
} | |
function DropdownWidget(model){ | |
var $select = $("select"); | |
var $label = $("label.for-select"); | |
var selectObservable = $select.changeAsObservable() | |
.map(function(ev){ | |
return ev.target.value; | |
}) | |
function render(value){ | |
$select.val(value); | |
$label.text(value); | |
} | |
model.subscribe(function(value){ | |
log("select model.subscribe fired with: "+value+""); | |
render(value); | |
}) | |
selectObservable.subscribe(function(value){ | |
log("selectObservable.subscribe fired with: "+value+""); | |
model.onNext(value); | |
}) | |
} | |
function WidgetClusterObserver(model){ | |
$validIndicator = $(".valid-indicator"); | |
var isValid = Rx.Observable.combineLatest( | |
model.name, | |
model.color, | |
function (name, color) { | |
return !!(name && color) | |
} | |
); | |
isValid.subscribe(function(value){ | |
log("widgetCluster valid observer called: "+value+""); | |
if(value){ | |
$validIndicator.show(); | |
}else{ | |
$validIndicator.hide(); | |
} | |
}) | |
} | |
new InputWidget(model.name); | |
new DropdownWidget(model.color); | |
new WidgetClusterObserver(model); | |
}) |