A Pen by Radoslaw Scheibinger.

index.html

<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>

RxJS-two-way-binding-example.markdown

RxJS two way binding example

Example of how to implement two way data-binding using rxjs.

A Pen by Radoslaw Scheibinger on CodePen.

License.

script.js

$(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);
})