[RxJS] Basic DOM Rendering with Subscribe
2016-03-13 21:27
603 查看
While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscriptions for you, this lesson shows how you can still do basic subscribe blocks and manually update the DOM on your own.
const Observable = Rx.Observable; const startButton = document.querySelector('#start'); const halfButton = document.querySelector('#half'); const quarterButton = document.querySelector('#quarter'); const stopButton = document.querySelector('#stop'); const resetButton = document.querySelector('#reset'); const input = document.querySelector('#input'); const start$ = Observable.fromEvent(startButton, 'click'); const half$ = Observable.fromEvent(halfButton, 'click'); const quarter$ = Observable.fromEvent(quarterButton, 'click'); const stop$ = Observable.fromEvent(stopButton, 'click'); const reset$ = Observable.fromEvent(resetButton, 'click'); const input$ = Observable.fromEvent(input, 'input') .map(event => event.target.value); const data = {count:0}; const inc = (acc)=> ({count: acc.count + 1}); const reset = (acc)=> data; const starters$ = Observable.merge( start$.mapTo(1000), half$.mapTo(500), quarter$.mapTo(250) ); const intervalActions = (time)=> Observable.merge( Observable.interval(time) .takeUntil(stop$).mapTo(inc), reset$.mapTo(reset) ); const timer$ = starters$ .switchMap(intervalActions) .startWith(data) .scan((acc, curr)=> curr(acc)) timer$ .do((x)=> console.log(x)) .takeWhile((data)=> data.count <= 3) .withLatestFrom( input$.do((x)=> console.log(x)), (timer, input)=> ({count: timer.count, text: input}) ) .filter((data)=> data.count === parseInt(data.text)) .reduce((acc, curr)=> acc + 1, 0) .repeat() .subscribe( (x)=> document.querySelector('#score').innerHTML = ` ${x} `, err=> console.log(err), ()=> console.log('complete') );
相关文章推荐
- 快乐的JS正则表达式(开篇)
- JS基础知识
- VS2005编译PJSIP库
- [RxJS] Resubscribing to a Stream with Repeat
- JSON 数据的系统解析
- 初学JS的感谢
- JavaScript:NaN和Infinity
- javascript
- js简单交互动画,运动吧
- JavaScript深度克隆
- JavaScript异步加载:不只是Ajax
- JavaScript语言精粹(读书笔记)
- 四种参数传递的形式——URL,超链接,js,form表单
- JavaScript基础篇(一)— — 基础
- JSP与servlet之间的传值方式
- 11. jsp与servlet之间页面跳转及参数传递实例
- jsp页面间的传值方法
- 浏览器中的javaScript
- js实现放大镜效果
- html中js实现左边框控制右边框的显示