問題タブ [xstream-js]

初心者として、 Cycle.jsで 3 つの項目を含むリストを作成しようとしています。しかし、コードにはバグがあります。私はjsbinを作成し、以下にもコードを配置しました

http://jsbin.com/labonut/10/edit?js,output

問題：最後のチェックボックスをクリックすると、新しいチェックボックスが追加され（これは望ましくありませんでした）、古いチェックボックスは「オン/オフ」ラベルを変更しません。また、最後のものを除いて、まったく反応しません。私は何を間違っていますか？

TypeScript ハンドブックでは、宣言のマージの例を次に示します。

Webpack は TypeScript コードをコンパイルするため、次の型定義が付属する npm モジュールxstreamを使用できます。

このように使用できます（map有効な方法です）：

インターフェースを拡張したいと思いStream、公式の例に似たものを試しました。したがって、私の場合は"xstream"代わりに"./observable"あり、拡張子はmap.tsではなくextensions.tsファイルにあります。

悲しいことに、複数のエラーが発生します。

どうすれば修正できますか?

使用バージョン

ストリームを 1 つに結合し、テキストを h1 に表示しようとして失敗しました。

しかし、それを機能させることができません:

これは私のコードです:

次のようなエラーが表示されます。

理由を理解しようとしていますが、今のところ運がありません。

以下に示すような、cycle.js とリアクティブ xstream ライブラリを使用したコードがあります。これは、送信時に値が ap タグでレンダリングされるフォーム フィールドで構成されます。質問は次のとおりです。 1. フォームの送信時に、フォームの入力フィールドをデフォルト値にリセットするにはどうすればよいですか? 2.送信後にinput$およびsubmit$ストリームを初期値にリセットする方法はありますか?

このようなフォームを作成するより良い方法はありますか? PS formIntent 関数の出力は、formView 関数の入力に供給されます。

cycle.js と xstream を使用して、ボタンのクリックをカウントしてリセットしたいと思います。

最後のリセット後にすべてのボタンクリックをカウントすることで、これを達成することを計画していました. これを行うために、最後のリセットまですべてのボタンクリックをドロップし、残っているものをカウントすることを考えました.

ただし、機能しないボタンが2つ残っています

何かアドバイス？

デモ同形のCycle.js / Hapi.jsアプリを作成しようとしていますが、サーバーでのレンダリング中に xstream で例外が発生して失敗します。ここで何がうまくいかないのですか？Cycle.js の isomorphic app exampleに基づいてアプリを作成しました。

トレースバックは次のようになります。

レンダリング コードは基本的に次のようになります。

完全なソース コードはここにあります。

Node v6.6.0、babel-node 6.14.0、Hapi 15.0.3、@cycle/dom 12.2.5、および @cycle/xstream-run 3.1.0 を使用して OS X で実行しています。さらに情報が必要な場合はお知らせください。

xstream で CycleJS を試していますが、エラー (422 など) を救出し、HTTP ドライバーから JSON 応答を取得する方法が見つかりません。

replaceErrorエラーから救うために、次のように動作するように見えるxstream を使用しています。

しかし、API はユーザーに表示したいエラー メッセージを返し、デフォルト オブジェクトに置き換えると失われます。設定されている唯一のプロパティresponse$は、実際の要求データです。

バージョン:

どんなアイデアでも大歓迎です！

ページには単一のボタン要素があり、次のクリック ストリームがあります。

ボタンをクリックするtrueとログに記録されますが、これは正しいです。

ただし、ストリームをマップすると、内部のコードが 2 回実行されます。

他のイベント ハンドラーをボタンにアタッチする必要はなく、要素自体は div 内に配置されます。

通常のと は違いはevent.preventDefault()ありevent.stopPropagation()ません。イベントを調べると、同じ要素から起動されていることがわかりますbutton.btn--add。

何が起こっているのかよくわかりませんが、どんなアイデアでも大歓迎です! ありがとう！

バージョン:

更新 1: 3 回チェックしましたが、JS ファイルが 2 回読み込まれることはありません。ページにロードされる単一のファイルをバンドルする Webpack を使用しapp.jsています (Elixir/Phoenix アプリ)。また、Chrome の Developer Tools のタブでボタンを調べると、Event Listeners処理されたイベントが 1 つだけ添付されているようです。

更新 2: コードの要旨

実行可能な例: 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自分の (コンポーネントのこのインスタンス) サブ要素のみからできる方法はありますか?