2

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}]

銘柄ごとにウィジェットを作成する必要があります。したがって、前の質問のパターンを変更する必要があります。子は 1 つではなく、入力ストリームに基づいて子が作成/破棄されます。たとえば、最初のイベントで「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);

これはすべてかなり不格好に思えます。それを整理するためのより良い方法はありますか？子ごとに 1 つのストリームのストリームとしてモデル化し、出力をマージしてみました。これはうまくいきませんでした。内部サブスクリプションを追跡したり、子から複数のストリームを出力したりするのは困難でした。

4

0 に答える 0