Foundation の Reveal プラグインを使用して、Cycle.js アプリで素敵なモーダルを表示したいと考えています。

Webpack とその構成で何時間も遊んだ後、財団の js を自分の (es6) アプリに適切にインポートする方法を見つけました。

ただ、仮想DOMを扱っているので、Foundationのjsを初期化した時点では実際のhtmlは存在しません。

これが私のコンポーネントのコードです:

私のmain.js：

$(document).foundation()これで、アプリが初期化された後にコンソールで実行すると、期待どおりに動作します。しかし、アプリ コードでは、dom は仮想であり、実際の html はまだ挿入されていないため、何も表示されません。

アプリが完全に初期化され、dom が実際に設定された後、どうすれば js コードを実行できますか?

main以下のように、関数にいくつかのエラー処理コードを実装しました。演算子を使用して、catchあるストリームのエラーをフィルタリングして報告し、別のストリームではそれらを無視します。これにより、ストリーム全体を失敗させずに、リクエストで発生したエラーを把握して報告できるため、後続のリクエストを続行できます。

以下のコード スニペットでは明らかにならない理由により、データを要求して処理するカスタム ドライバーを実装しています。サイクル http ドライバーを使用していません。

エラーを正常に報告するコードは次のとおりです。

出力は次のとおりです。

プラス面では、エラーが報告されます。ただし、API リクエストは実際には 2 回行われます。これは、最初に予想したことではありません。

RxJS をさらに学習し、Hot および Cold Observable の理解を深めた後、CustomDriver ストリームに 2 つのサブスクリプション (1 つは error$ 用、もう 1 つは data$ 用) を作成していることに気付きましたObservable.just。各加入者。

だから私は CustomDriver Observavble をホットにしようとしましたshare:

その変更により、出力は次のようになります。

そのため、重複したリクエストをなんとか取り除くことができましたが、エラーはその過程で飲み込まれました。

エラーが失われる原因は何ですか?shareまた、エラーを失うことなくリクエストの重複を回避するにはどうすればよいですか?

条件付きレンダリングに問題があります。これが私の100％の作業ビューです：

問題は、条件付きボタンを 2 つの個別の条件ではなく if-else に変更しようとしたときです。

ボタンを「マーク解除」に切り替えてから、再び「マーク」に戻すようです（コンソールログで確認しました）。私のインテントは.markと.unmarkの 2 つのクラスにマップされているので、それは問題ではないと思います...

それは実際のエラーですか、それとも何か不足していますか?

を使用して、任意の数の連続した依存 http リクエストを作成する例はありますcycle-httpか?

現在のページのデータを使用してのみ次のリクエストを行うことができる API からすべてのページを取得したいと考えています。

Observable.merge() を使用するこの回答を適応させようとしましたが、それをcycle-httpソースとシンクに接続する方法がわかりません。

参考文献

• Cycle.jsでデータを順番にリクエストする方法は?
• RxJs 観測可能なページネーション

私はcycle.jsとwebpackを試しています。次のindex.jsファイルを取得しました。これは、cycle.js ドキュメントで見つけたもののほぼコピーです。

そして、これが私のものですindex.html

bundle.jsフォルダ内に生成するためにwebpackを使用していdistます。Chrome で開いてアプリを実行するとindex.html、Chrome コンソールで次のエラーが表示されます。

cycle.js アプリのこの一見単純な最初のステップで、何が間違っているのかわかりません。