問題タブ [reflex]

私は github ページの reflex-frp の例を調べていて、Dynamics and Events セクションで行き詰まりました。ghcjs を使用して次のコードをコンパイルしようとしています。

しかし、私はエラーが発生します

String を代わりに Data.Text.Internal.Text として解析する必要があることは理解していますが、これを実現する方法がわかりません。上部の OverloadedStrings ステートメントがこの問題を解決するはずだと思いました。このエラーを修正する方法を知っている人はいますか?

HTML DOM 要素を作成するための一連の関数を定義するReflex.Dom ライブラリを使用しています。

• el要素を作成します
• el'要素を作成して返す
• elAttr指定された属性を持つ要素を作成します
• elAttr'指定された属性を持つ要素を作成して返します
• 等

私は独自のウィジェット ライブラリを作成していますが、すべてのウィジェットに対してすべてのバリエーションを定義したくありません。そこで、同じ名前を使用する型クラスを作成しましたが、すべての関数を相互に定義し、各インスタンスで定義されるのはそのうちの 1 つだけです。

elAttr'オリジナルを使用してテストするインスタンスを作成しました。出来た：

Button次に、ボタンがクリックされたときにイベントを返すウィジェット インスタンスを作成しました。出来た：

ウィジェットを構成できるようにしたいので、のインスタンスを使用して要素を作成するようにインスタンスを書き換えてみましButtonた。しかし、コンパイルに失敗します:TextElMaker

コンパイラ出力:

これは、関数がその型を制約する値で何もせず、コンパイラーが実際に具体的な型を持つことを望んでいるためだと思います。しかし、この型クラスは、その型パラメーターの値が何であるかを気にしません。とにかくこれをコンパイルする方法はありますか？

最も単純なケースでは、 がDynamic t Boolあり、値が true の場合、空の div が 1 つ存在するようにし、値が false の場合、dom 要素が存在しないようにします。

もう少し一般的に言えば、 があり、またはDynamic t (Either MyA MyB)を指定してレンダリングする方法を知っている関数がある場合、適切な関数を呼び出してレンダリングする方法を教えてください。Dynamic t MyADynamic t MyB

バックエンドシステムで維持されているアプリケーションの状態があるとしましょう。このように見えます

バックエンドシステムから最新の状態を取得する機能も持っています

バックエンドに繰り返しクエリを実行することで、それをダイナミックにパッケージ化する方法を理解できると確信しています。

これをhtmlにレンダリングしたい。データ構造の各部分を div にレンダリングします。ただし、存在しないものはまったくレンダリングされるべきではありません。したがって、ms2_maybe_charisの場合は div がなく、 is a のNothing場合は .の div はありません。MyStateState1State2

わかりやすくするためにいくつかの例を示します。

になる

と

になる

理想的には、DOM の各部分は必要な場合にのみ変更する必要があります。そのため、が からにms2_maybe_char変更された場合は、新しい div を作成する必要があります。または、が からに変更された場合、DOM でその文字列を変更する必要があります。ただし、変更によって兄弟ノードまたは親ノードが再描画されることはありません。NothingJust 'a'ms1_text"foo""bar"ms1_text

コードをどのように構成すればよいですか? getLatestStateビルディングブロックとしてのAPIを考えると、これは可能ですか? 単一の値から構築しようとすることで、Reflex の要点を完全に見逃しているのDynamicでしょうか。アプローチを再考する必要がありますか?

特に、最初の障害は、Dynamic に State1 が含まれているか State2 が含まれているかを簡単に調べられないことです。dynorwidgetHoldここで、状態を単純な値として扱い、全体を描画するアクションを生成できるfmap関数を使用する可能性があります。しかし、その後、すべての共有が失われます。状態が変化するたびに、UI 全体が最初から再描画されます。dynMyStatem ()

注: これは、Reflex Dynamic 内の値で分岐するにはどうすればよいですか?へのより詳細なフォローアップの質問です。. この質問の違い/より明確な点は、検査された値内のすべての効率的な更新を失わないようにしたいという追加の欲求です。その質問にも協力してくれたみんなに感謝します！

私の特定の問題は次のようなものです：

と が与えられたEvent t [a]場合Event t ()(ティック イベントとしましょう)、 を生成したいと思いますEvent t a。つまり、ティック イベントが発生するたびに、入力リストから連続した項目が返されるイベントです。

Reflex には次のヘルパーがあります。

これは私がやりたいことを正確に行っていますが、イベントを入力としてではなく、単なるリストとして受け取ります。を持っているEvent t [a]ので、イベントを含むイベントを生成して切り替えることができると思いましたが、問題はzipListWithEvenモナドのコンテキストで動作するため、次のようになります。

これはswitchプリミティブが受け入れないものです。

さて、おそらく私は間違った方法でアプローチしているので、ここに私の一般的な問題があります。座標のリストと tick イベントを生成するイベントが与えられた場合、座標に沿ってオブジェクトを移動するために「使用」できるイベントを生成したいと考えています。したがって、ティックが発火するたびに、位置が更新されます。そして、座標リストを更新するたびに、その新しいリストから位置を生成し始めます。

私は GHCJSi のバージョン 0.2.0-7.10.3 を使用しています: http://www.github.com/ghcjs/ghcjs/およびhttps://github.com/reflex-の reflex-dom ライブラリ バージョン 0-4 frp/reflex-dom . Hackage の reflex-dom-0.3 は使用していません。

次の Haskell プログラムは、reflex-dom-0.4 ではコンパイルされません。

エラーが発生します

reflex-dom ライブラリ関数decodeXhrResponse(および もdecodeText) をインライン化します。FromJSON a => XhrResponse -> Maybe a型シグネチャを型変数のないシグネチャに変更しますXhrResponse -> Maybe Apod。その後、プログラムは正常にコンパイルされます。

rspApod :: Event t Apodor のような rspApod のスコープ型変数を追加しようとしました rspApod :: Event Spider Apodが、役に立ちませんでした。

質問:

正常にコンパイルするには、最初のプログラムをどのように変更する必要がありますか? (ライブラリ関数のインライン化と変更は非常に悪いハックです!)

FromJSONコンパイラがデータ型のインスタンスを見つけて使用しないのはなぜApodですか?

マテリアル UI を reflex frp と統合しようとしましたが、通常 (css のみの要素) は見栄えがよく、滑らかに見えますが、ドロップダウン/選択フォーム要素を初期化するには jQuery が必要なようです - これは機能しません:

<script>ステートメントの順序を変更し、本文の -line のindex.html前に document-ready-jQuery 文字列を挿入しようとしました。runmain.js

を挿入して、スクリプトタグが実行されることも確認しましたalert。

Main.hs

index.html