javascript - RxJS を使用して Cyclejs で Observable ストリームを個々の更新可能な div に変換する方法

Question

次のようなプロパティを持つ 10 個のオブジェクトのランダムな Observable ストリームを取得しようとしています。

{tileNum: '6', tileName: 'game-of-thrones' clickCount:'1'}

次に、オブジェクト内の同一のオブジェクトが を使用してストリームを通過するclickCountたびに増加する必要があります。ここでトリッキーな点として、ストリーミングされたそれぞれを div (0-9) にアタッチする必要があります。これらの div を事前に設定し、関連する div をオブジェクトにアタッチする必要があります。例えば：tileNumtileNumtileNumclickCount

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;

model.js

const view = (state$) =>
  state$.map(source => {
    return div([
      h(`div#${source.tileNum}`, {}, ['${source.clickCount}']),
    ])
  });
export default view;

view.js

現在、新しいストリーム オブジェクトごとに変更される 1 つの div しか設定できません。注意点として、必要ではありませんが、div を並べ替えることができれば、clickCountそれは驚くべきことです。