問題タブ [cyclejs]

私は NodeJ の経験があまりありません。Cyclejs を試してみたいと思いました。ドキュメントには次のように記載されています。

新しいディレクトリを作成し、そのディレクトリ内でこれを実行します。

npm install rx @cycle/core @cycle/dom

これを行うと、次の警告が表示されます。

その後、cycle-examples のクローンを作成しnpm start、指示に従って実行しました。次のエラーが表示されます。

エラーは、私が持つ必要があると言っていpackage.jsonます。git リポジトリにはありません。自分で作成する必要がありますか？もしそうなら、そのファイルの中に何を入れるべきですか？

npm バージョンは 3.3.8 です

Nodeにグローバルにインストールされたbrowserify@11.2.0およびbabel@5.8.23ライブラリがあります。

Bower : @Cycle/Core、@Cycle/DOM の Bower パッケージが見つかりませんでした。これらのライブラリは存在しますか? Cycle.js はフロントエンド ベースであるため (そして NPM はバックエンドのみに特化されているため)、そもそもなぜ NPM パッケージがあるのか​​、私は混乱しています。

ES5 : Cycle.js を Gulp/Typescript/ES5 で使用することは可能ですか (Browserify/webpack を使用しないでください)?

私はリアクティブ プログラミングが初めてで、cycle.js をいじって、このチュートリアルのボックスに従う人を実装しようとしています。しかし、適切な実装 (および学習目的) のために、完全なユーザー名という 1 つのデータを持っていないことを理解しました。ユーザーを順番に取得してから、サーバーから完全なユーザーデータを取得することで取得できます。命令型のスタイルでは、次のようにします。

しかし、どうすればサイクルでそれを行うことができますか? 私はフェッチドライバーを使用しており、次のようなことを試みています:

どこgetJSONですか

そして、私は常に次のような不可解な（私にとっては）エラーを受け取りますTypeError: Already read。それはどういう意味ですか、どうすれば適切に処理できますか?

ネストされたダイアログとしていくつかのcycle.jsの例を作成しようとしており、選択ボックスを使用してそれらを切り替えています。

ダイアログの 1 つは、公式の Github HTTP 検索の例のクローンです。

もう 1 つのダイアログは、HTTP を使用せず、DOM のみを使用する、より基本的なダイアログです。

2つの間の切り替えに頭を悩ませているように感じますが、Rxにかなり慣れていないため、誤って、または素朴に行われる可能性があります.

検索ページに読み込みインジケーターを追加するまでは、すべてうまく機能しているように見えました。

そのために、私はこれを変えました：

これに：

私は今2つの問題を抱えています

1. 「checkbox value set to」および「route changed」メッセージは、チェックボックスが変更されるたびに 2 回ログに記録されます。
2. HTTP リクエスト ログは 1 回だけ発生しますが、Dev Tools でネットワーク アクティビティを監視すると、2 つの GET リクエストが同時に表示されます。

助けてくれてありがとう！

編集:私自身の問題を解決しました。以下の回答を参照してください。

次のようなプロパティを持つ 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'

これまでのところ、私は持っています:

index.js

model.js

view.js

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

cyclejsコンポーネントを参照する (かなり哲学的な) 質問があります。isolate() は参照透過性ですか? .

その後に再現された単純化されたコードを見ると、「不純物」の原因を識別することができませんでした。それは単純化されていないコードがそれを導入しているためですか、それとも関数が 2 つの異なる参照を持つ 2 つの異なるオブジェクトを返すためですか?

その場合、これらの 2 つのオブジェクトは同じ動作をしません (つまり、同じターゲットで同じイベントをリッスンして反応し、異なる vTree$ を生成しますが、まったく同じシーケンスをカプセル化しますか?)。もしそうなら、これらの 2 つのオブジェクトは本質的に同じではないでしょうか? つまり、プログラムのどこかで一方を他方に置き換えても何も変わらないはずです。isolate参照透過性とはどのような意味ですか? どこで私は間違えましたか？

実際、両方の呼び出しが代入できない異なるオブジェクトを返す場合、それらのオブジェクトはどのように異なるのでしょうか?

私は Cycle.js フレームワークで遊んでいて、ポップアップ/オーバーレイをコンポーネントとして作成しました。

popup-component を分離しました。イベントのソースとして通常使用する sources.DOM は、ポップアップ DOM のみに制限されています。

コンポーネントがその外側のクリックを検出するためのcycle.jsの方法はありますか? それとも、リスナーをドキュメントに添付することに頼るべきですか?

私は、messages$ストリームの配列であるmessages$sを含むstate$ストリームを持っています。State$ が更新され、新しい messages$ が表示されます。

サブスクライバーがすべてのメッセージ $ からのメッセージを 1 つの単一ストリームで処理するようにしたいのですが、このストリームには正しいイベントのみが含まれている必要があります。

毎回マージされたメッセージ $ を flatMap しようとしましたが、古いメッセージ $ (以前の状態の $ 値) が複数回サブスクライブされるという問題が発生しました。

これを解決するにはどうすればよいですか？

let allMessages$ = state$.flatMap(s => { return Observable.merge(s.messages$s) } ) allMessages$.subscribe((x)=>{ console.log('message', x) // message from single message$ appear multiple times })

問題は、state$ が更新された後 (アイテムがプッシュされた状態)、古いものが複数回サブスクライブされるようになったことです。 state$ --s(1)---------s(2)---- message$s[0]. --m1----m2-----------m4-- message$s[1] ---------------m3-------- allMessages$ --m1----m2-----m3----m4 m1 m4

s(1) - 状態に 1 つのメッセージ $ がある場合、s(2) 2 番目のメッセージ $ が追加された場合 したがって、allMessages$ は item1 からのメッセージで発火します。

私が欲しいのは： state$ --s(1)---------s(2)----- message$s[0] --m1----m2-----------m4-- message$s[1] ---------------m3-------- allMessages$ --m1----m2-----m3----m4

このフィドルは状況を簡略化したものです: http://jsfiddle.net/8jFJH/797/

ある要素の不透明度として使用するボタンを誰かがクリックすると、タイマーが開始されます。値をトレースするために使用doすると、値がコンソールに 40 回吐き出されていることがわかりますが、ビューでは数値が表示されたままです。ここでどこが間違っているのかわかりません：

更新:ハイパースクリプトに小さなエラーがあると、奇妙な動作が発生することが判明しました。関連性があるとは思わなかったので、例には含めませんでした。

上記を単純に（クラスの表示を追加）に変更する

すべてが魔法のように機能するようにしました。