跟进如何构建 rxjs 代码,关于在使用 rx 时如何使用子小部件构建小部件,在子小部件由数据驱动的情况下,您将如何构建 rx 代码?
作为一个玩具问题,假设您有一个外部源(例如 Web 服务)流式传输要观看的股票列表,包括价值、高、低等。所以您有一个 Observable 流,例如(时间下降):
[{id: 'csco', value: 12, high: 20, low: 10}]
[{id: 'csco', value: 12, high: 20, low: 8},
{id: 'aapl', value: 29, high: 30, low: 20}]
您需要为每个股票代码构建一个小部件。所以必须修改上一个问题中的模式。没有一个孩子,而是根据输入流创建/销毁一个孩子,例如,我们在第一个事件中为“csco”创建一个孩子。在第 2 次事件中,“csco”孩子获得更新(低:8),我们为“aapl”创建了一个孩子。
您可以将子小部件创建移动到订阅:
function widget(state) {
state = state.share();
var children = {};
state.subscribe(function (s) {
findNew(children, s).forEach(function (stock) {
children[stock] = subwidget(state.select(findById.bind(null, stock)));
});
// ... delete old ones similarly
});
}
这引入了一个排序问题:孩子没有得到导致它被创建的事件。您可以通过执行类似state.repeat(1)
, 或的操作来解决此问题state.startsWith(s).select(...)
,但它看起来有点奇怪。
假设孩子们也在返回溪流。例如,也许用户操纵孩子们来模拟不同的位置,所以我们想从孩子们那里得到一些计算,并在小部件中显示一个总体总数或其他指标。
您是否在 widget() 中创建了一个主题并将来自孩子的流推送到它上面?喜欢
var positions = new Rx.Subject();
positions.mergeAll().subscribe(displayTotal);
...
.. subscribe(function(s) {
child = subwidget(...)
children[stock] = child.disposable;
positions.onNext(child.position);
这一切看起来都很笨拙。有没有更好的组织方式?我尝试将其建模为一个流,每个孩子一个,并合并输出。这效果不佳。很难跟踪内部订阅,或者从子级输出多个流。