More about bioinformatics

First time with Rx.js

Basically I will have two buttons, add and stop. Setup 2 sources to receive event from these two buttons so you can see two variables.

1
2
var stopClick = Rx.Observable.fromEvent(document.querySelector('#stop'), 'click')
var click = Rx.Observable.fromEvent(document.querySelector('#add'), 'click')

Then I use some operators to handle click event from add button and generate new state and pass to render function. Now I have done the behavior of add button.

1
2
3
click.map(file => state => Object.assign({}, state, {
file: 'file-' + Math.floor(Math.random() * 100) + 1 + '.pdf'
})).do(_render)

After rendering new state, the new item shows up in the fileList container. Now I have to add remove event upon it. I use takeUntil to unsubscribe this observable and then use subscribe to activate it.

1
2
3
4
5
6
7
Rx.Observable.fromEvent(document.querySelector('#remove'), 'click')
.map(() => state => Object.assign({}, {
file: ''
}))
.do(_render)
.takeUntil(stopClick)
.subscribe()

The overall snippet is as below.

Reference

Comments