RxJS Demos

A small app

by dream apple

HTML

<div class="app">
    <button id="minus">-</button>
    <span id="result">0</span>
    <button id="plus">+</button>
</div>

<script src="https://cdn.bootcss.com/rxjs/5.0.0-rc.1/Rx.min.js"></script>

JavaScript

// 选取相应的元素
    let minusEle = document.querySelector('#minus');
    let plusEle = document.querySelector('#plus');
    let resultEle = document.querySelector('#result');
		
    // 展示结果的函数
    let showResult = function(value) {
        resultEle.innerHTML = value;
    };

		// 创建相应的事件流
    let minus = Rx.Observable.fromEvent(minusEle, 'click')
            .map(() => state => Object.assign({}, state, {count: state.count - 1}));
    let plus = Rx.Observable.fromEvent(plusEle, 'click')
            .map(() => state => Object.assign({}, state, {count: state.count + 1}));

		// 合并事件流
    let state = Rx.Observable.merge(minus, plus)
            .scan((state, func) => func(state), {count: 0});

		// 订阅事件流
    state.subscribe((state) => showResult(state.count));