Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<script src="https://cdn.rawgit.com/cyclejs/cycle-core/master/dist/cycle.min.js"></script>
<script src="https://cdn.rawgit.com/cyclejs/cycle-dom/master/dist/cycle-dom.min.js"></script>
<script src="https://cdn.rawgit.com/cyclejs/http/master/dist/cycle-http-driver.min.js"></script>
    <meta charset="utf-8">
    <title>inc dec</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
 
const {div, button, p, makeDOMDriver} = CycleDOM;
​
function main({DOM}) {
  const action$ = Rx.Observable.merge(
    DOM.select('.decrement').events('click').map(ev => -1),
    DOM.select('.increment').events('click').map(ev => +1)
  );
  const count$ = action$.startWith(0).scan((x,y) => x+y);
  return {
    DOM: count$.map(count =>
      div([
        button('.decrement', 'Decrement'),
        button('.increment', 'Increment'),
        p(`Counter: ${count}`)
      ])
    )
  };
}
​
Cycle.run(main, {
  DOM: makeDOMDriver('#container')
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers