問題タブ [cyclejs]

実行可能な例: https://esnextb.in/?gist=978799bf48a7f914cbbd39df0213d672

アプリケーションの現在の UI をサイクル アプリに置き換えるかどうかを確認するために、cycle.js の複数選択コンポーネントを作成しようとしています。

複数選択内のオプション用に 1 つのコンポーネントがあります。各オプションは、フォーム {selected: Bool, label: String, value: Int} で渡された props を取得します。

コードの概要は次のとおりです。

Option コンポーネントはそれ自体のクリックをリッスンし、props$ ソースのオプションに渡された最初のブール値に論理「not」関数を折りたたむことによって生成されたブール値のストリームを組み合わせることで、「選択された」ブール値を切り替えます。

次に、Option コンポーネントはその状態のストリームを出力し、Multiselect コンポーネントがそれを参照して、選択された値などのストリームを返すことができるようにします。

Multiselect コンポーネントは、オプション [{selected, label, value}...] を持つストリームを含む props$ ソースを受け取ります。

これらのオプションから、Option コンポーネントの配列のストリームを構築します。

Option コンポーネントのストリームは、仮想 DOM ツリーの配列のストリーム (オプションごとに 1 つ) にフラット化されます。

オプション コンポーネントのストリームも、状態の配列のストリーム (オプションごとに 1 つ) にフラット化されます。

ここから問題が始まります。

上記の両方で .observe(console.log) を呼び出すと、一度だけログに記録されます。

複数選択を表示するために、オプションの仮想 DOM ツリーの配列のストリームをマップして、複数選択の仮想 DOM ツリーを生成します。

また、この vtree ストリームを状態ストリームと組み合わせて、両方を console.log できるようにします (observe はそれらを 1 回しかログに記録しないため)。

それらをログに記録すると、vtree 配列は変更されますが、すべてのオプションの状態は常に初期状態と同じです。

これは、オプションが分離されている場合にのみ発生します。それらが分離されていない場合、それらはいずれかをクリックするとすべて応答しますが、それらの状態は変更されたものとしてログに記録されます。

ここで何が起こっているのですか？なぜ物質を分離するのですか？結合されたすべてのストリームが毎回起動するわけではないためですか? 私がやっていることは完全に慣用的ではありませんか?

http://pastebin.com/RNWvL4nfここにもペーストビンがあります。webpackbin に置きたかったのですが、必要なパッケージをダウンロードできませんでした。

編集: franciscotln は親切にも、私の何かを明らかにする実際の例を作成しました。 https://gist.github.com/franciscotln/e1d9b270ca1051fece868738d854d4e9 小道具がオブザーバブル内にラップされていない単純な配列である場合、それは機能します。おそらく、それが配列のオブザーバブルである場合、子コンポーネントの単純な配列ではなく、コンポーネントの配列のオブザーバブルが必要になるためです。

ただし、この 2 つは等価ではありません。私の元のバージョン (オプションは配列のストリーム) では、props$ は単なる .of オブザーバブル以外のものにすることができます。その値はプログラムの過程で変化する可能性がありますが、2番目の値では元の配列に固執しています。

分離されたコンポーネントの配列のストリームに問題はありますか?

cycle.js を使用して、イベント ハンドラーを含め、ページに複数回存在できる再利用可能なコンポーネントを作成しようとしています。

使用DOMSource.selectすると、アプリ コンテナ全体で一致するようです。.select自分の (コンポーネントのこのインスタンス) サブ要素のみからできる方法はありますか?

cycle.js で無限スクローラーを構築しています。ページごとに X 件の結果を返す ajax サービスがあります。最初のリクエストのページ ID は 0 ですが、後続のリクエストでは、最初の結果セットで返されたページ ID を使用する必要があります。結果は dom に配置されます。ユーザーが表示されている結果の一番下までスクロールすると、新しいセットが読み込まれ、リストに連結されます。機能するものがありますが、希望どおりではありません。

短縮版は次のようになります。

主な問題は、ajax リクエストがスクロール位置にリンクされていることと、スクロール中に複数のリクエストが発生する可能性があることです。

巻物をデバウンスした瞬間ですが、ここでは理想的ではありません。

必要なときに (ユーザーがページの下部にいるときに) 1 つの要求のみが送信されるように、ストリームを調整する方法についてのアイデアはありますか?

私はおそらくページごとに一意のIDを使用し、getitem $で.dropRepeatsを使用しますか? ただし、結果に一意のページ ID はありません。

Cycle が virtual dom を使用し、React も使用する場合、Cycle.js アプリ内でReactコンポーネントを使用できないのはなぜですか?

既存の React コンポーネントを Cycle.js コンポーネントにラップすることは可能ですか?

この質問は以下に関連しています: React を使用した高次 FRP - なぜそれが起こらないのですか?

次のスニペットがあります。

これは次のようにレンダリングされるようです:

どの属性もレンダリングされていないことに注意してください。このファイルの私のcycle.jsインポートは単純です：