我正在尝试获取 10 个对象的随机 Observable 流,每个对象具有以下属性:
{tileNum: '6', tileName: 'game-of-thrones' clickCount:'1'}
接下来,clickCount
每次tileNum
对象内部相同的对象通过流使用tileNum
. 现在对于流式传输的每个tileNum
需要附加到 div (0-9) 的棘手位,这些 div 将需要预先填充并clickCount
增加附加到对象的相关 div。例如:
div 6 = clickCount:'1'
=> {tileNum: '6'..}
=>div 6 = clickCount:'2'
到目前为止,我有:
const tile = (sources) => {
const incomingMessages$ = sources.socketIO.get('newClickStream'); // continuous Observable
const state$ = model(incomingMessages$);
const view$ = view(state$);
return {
DOM: view$,
}
};
index.js
const model = actions =>
actions.groupBy((tile) => tile.tileNum)
.flatMap(
(tile$) =>
tile$
.scan((prev, {tileName, tileNum}, index) => ({
tileNum,
tileName,
clickCount: index + 1
}))
.do(x => console.log(x))
);
export default model;
模型.js
const view = (state$) =>
state$.map(source => {
return div([
h(`div#${source.tileNum}`, {}, ['${source.clickCount}']),
])
});
export default view;
视图.js
现在我只能填充一个在每个新流对象上都会发生变化的 div。作为警告但不是必需的,如果可以订购 div,clickCount
那将是惊人的。