Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Push-based MVVM DOM bindings for Reactive Extensions
CoffeeScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
bin
src
.gitignore
CakeFile
LICENSE.md
README.md
package.json

README.md

RxJS-Splash

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

News

I'll tweet about significant changes made to splash: @cwharris

Something went wrong with that request. Please try again.