RxJS-Splash

This project is no longer maintained. Please see React + Redux, or CycleJS for good examples of how to manage UI.

Push-based MVVM DOM bindings for Reactive Extensions

Check out these live examples.

Example

HTML

    <input type="text" data-splash="value: name"/>
    <div data-splash="text: name"></div>

JavaScript

    var vm = { 
      name: new Rx.BehaviorSubject('Christopher Harris')
    };

    sx.bind(vm);

Binders

Text

    <span data-splash="text: name"></span>

    sx.bind({
      name: new Rx.BehaviorSubject('Christopher Harris')
    });

Value

    <input data-splash="value: name"/>

    sx.bind({
      name: new Rx.BehaviorSubject('Christopher Harris')
    });

HTML

    <textarea data-bind="value: html"></textarea>
    <div data-bind="html: html"></div>

    sx.bind({
      html: new Rx.BehaviorSubject('<i>HMTL</i>')
    });

CSS

    <button class="btn" data-splash="css: { selected: isSelected }"></button>

    sx.bind({
      isSelected: new Rx.BehaviorSubject(true)
    });

Click

    <button data-splash="click: sayHi">Hello, World!</button>

    sx.bind({
      sayHi: function(vm, e) { 
        e.preventDefault();
        var text = $(e.currentTarget).text();
        alert(text);
      }
    });

Multiple Binders

    <button data-splash="text: counter,
                         click: select,
                         css: { selected: isSelected }">
    </button>

    sx.bind({
      counter: new Rx.Observable.interval(1000),
      isSelected: new Rx.BehaviorSubject(),
      select: function(vm, e) {
        vm.isSelected.onNext(vm.isSelected.value);
      }
    });

It's Rx!

    <div data-splash="text: counter"></div>
    <div data-splash="text: counter.take(250)"></div>
    <div data-splash="text: counter.sample(500)"></div>
    <div data-splash="text: counter.delay(1000)"></div>

    sx.bind({
      counter: Rx.Observable.interval(10)
    });

Disposing

Splash makes un-binding as easy as calling dispose.

    <button data-splash="text: counter, click: dispose"></button>

    var binding = sx.bind({
      counter: Rx.Observable.interval(250),
      dispose: function() { binding.dispose(); }
    });