Create DOM element and bind observables on it.
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.
examples
rfcs
src
.gitignore
.npmignore
LICENSE
README.md
package.json
tsconfig.json

README.md

rx-domh

Create DOM element and bind observables on it.


Inspired by Binding.scala and react-flyd, I made this.

Just a simple todo example:

/** @jsx h */
import h, { hr } from 'rx-domh';

import Rx from 'rxjs';

const todos$ = new Rx.BehaviorSubject([]);
const route$ = new Rx.BehaviorSubject('all');

let showing_todos$ = Rx.Observable.combineLatest(todos$, route$, (todos, route)=>{
  if (route=='completed') {
    return todos.filter(todo => todo.completed);
  }
  if (route=='not completed') {
    return todos.filter(todo => !todo.completed);
  }
  return todos;
});


let add_click$ = new Rx.Subject();
add_click$.subscribe(e => {
  if (text_input.value) {
    todos$.next(todos$.value.concat({content: text_input.value, completed: false}));
    text_input.value = '';
  }
});

const text_input = <input type="text" />

const root = (
<div>
  {hr(showing_todos$.map(todos=>todos.length>0), gt0 => gt0 ? (
    <ul>{hr(showing_todos$, todo => (
      <li style={todo.completed ? 'text-decoration:line-through;' : null} 
        onclick={e=>{todo.completed=!todo.completed; todos$.next(todos$.value);}}>{todo.content}</li>
    ))}</ul>
  ) : (<div>No One, Please Add</div>))}
  <div>
    {text_input}
    <button onclick={add_click$.next.bind(add_click$)}>add</button>
    <button onclick={route$.next.bind(route$, 'all')}>all</button>
    <button onclick={route$.next.bind(route$, 'completed')}>completed</button>
    <button onclick={route$.next.bind(route$, 'not completed')}>not completed</button>
  </div>
</div>
);

document.body.appendChild(root);

Well, it seems it's not that simple. But we can see the dom part is really simple. The complex part is those streams. OK, I have to admit I'm a rxjs newbee.