Push-based MVVM DOM bindings for Reactive Extensions
CoffeeScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
src
.gitignore
CakeFile
LICENSE.md
README.md
package.json

README.md

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