我想从datamaps库中获取一系列事件,但由于该库并非真正用Reactive Programming编写,因此我很难将任何发出的事件从它映射到Observable。到目前为止,我最好的尝试就是这个,但它并不是那么惯用。这是我能做的最好的还是我可能缺少一些基本的RxJs构造,这会使这更好/更简单/更易读?
import Rx from 'rx';
import {EventEmitter} from 'events';
import Datamap from 'datamaps';
const eventEmitter = new EventEmitter();
const mapEvents$ = Rx.Observable.fromEvent(
eventEmitter,
'mapEvent'
)
const map = new Datamap({
element: document.getElementById('map'),
done: (datamap) => {
datamap.svg
.selectAll('.datamaps-subunit')
.on('mouseover', (o) => {
eventEmitter.emit('mapEvent', o);
});
}
});
答案 0 :(得分:1)
看起来您正在使用EventEmitter作为事件总线,但我们已经可以使用Subjects代替。主题既是观察者又是观察者,这意味着你可以在它们上面调用onNext
给它们下一个事件,你可以在可观察序列上使用运算符。
简单地说,我会把它改写成这样的东西:
import Rx from 'rx';
import Datamap from 'datamaps';
const datamapsSubject = new Rx.Subject();
const map = new Datamap({
element: document.getElementById('map'),
done: (datamap) => {
datamap.svg
.selectAll('.datamaps-subunit')
.on('mouseover', (o) => {
datamapsSubject.onNext(o);
});
}
});
如果您需要在订阅时构建并在处理/取消订阅时销毁,您可能还会考虑Observable.create,但看起来您现在只是针对一个div元素。