問題タブ [cyclejs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Cycle.js: 複数選択コンポーネントの作成。オプション コンポーネントの状態を組み合わせたストリームが、変更された状態を出力しない
実行可能な例: 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番目の値では元の配列に固執しています。
分離されたコンポーネントの配列のストリームに問題はありますか?
cyclejs - cycle.js コンポーネントのインスタンスから要素を選択する方法
cycle.js を使用して、イベント ハンドラーを含め、ページに複数回存在できる再利用可能なコンポーネントを作成しようとしています。
使用DOMSource.select
すると、アプリ コンテナ全体で一致するようです。.select
自分の (コンポーネントのこのインスタンス) サブ要素のみからできる方法はありますか?
javascript - 単一の AJAX リクエストを保証するための Cycle.js ストリーム構成
cycle.js で無限スクローラーを構築しています。ページごとに X 件の結果を返す ajax サービスがあります。最初のリクエストのページ ID は 0 ですが、後続のリクエストでは、最初の結果セットで返されたページ ID を使用する必要があります。結果は dom に配置されます。ユーザーが表示されている結果の一番下までスクロールすると、新しいセットが読み込まれ、リストに連結されます。機能するものがありますが、希望どおりではありません。
短縮版は次のようになります。
主な問題は、ajax リクエストがスクロール位置にリンクされていることと、スクロール中に複数のリクエストが発生する可能性があることです。
巻物をデバウンスした瞬間ですが、ここでは理想的ではありません。
必要なときに (ユーザーがページの下部にいるときに) 1 つの要求のみが送信されるように、ストリームを調整する方法についてのアイデアはありますか?
私はおそらくページごとに一意のIDを使用し、getitem $で.dropRepeatsを使用しますか? ただし、結果に一意のページ ID はありません。
reactjs - Cycle.js アプリで React コンポーネントを使用できないのはなぜですか?
Cycle が virtual dom を使用し、React も使用する場合、Cycle.js アプリ内でReactコンポーネントを使用できないのはなぜですか?
既存の React コンポーネントを Cycle.js コンポーネントにラップすることは可能ですか?
この質問は以下に関連しています: React を使用した高次 FRP - なぜそれが起こらないのですか?
dom - Cycle.js/dom で属性のレンダリングを有効にするにはどうすればよいですか?
次のスニペットがあります。
これは次のようにレンダリングされるようです:
どの属性もレンダリングされていないことに注意してください。このファイルの私のcycle.jsインポートは単純です: