Fork me on GitHub

Ractive.js RxJS adaptor plugin

download: ractive-adaptors-rxjs.js more plugins at ractivejs.org/plugins

This (work-in-progress, broken) adaptor allows you to use RxJS observables within your Ractive templates.

Counter: 0

<button class='up'>up</button>
<button class='down'>down</button>

<p>Counter: {{counter}}</p>
// Example adapted from http://baconjs.github.io/
var ractive, up, down, counter;

ractive = new Ractive({
  el: 'demo',
  template: '#demo-template',
  adapt: 'RxJS'
});

up = Rx.Observable.fromEvent( ractive.find( '.up' ), 'click' );
down = Rx.Observable.fromEvent( ractive.find( '.down' ), 'click' );

counter = up.map( function () { return 1; })
  .merge( down.map( function () { return -1; }) )
  .scan( 0, function ( x, y ) {
    return x + y;
  }).startWith( 0 );

ractive.set( 'counter', counter );