Example of how to implement two way data-binding using rxjs.
A Pen by Radoslaw Scheibinger on CodePen.
Created
October 28, 2014 22:55
-
-
Save scheibinger/d872870c84b7948cf2b9 to your computer and use it in GitHub Desktop.
A Pen by Radoslaw Scheibinger.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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); | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment