問題タブ [maquette]

maquette.jsを仮想 DOM ライブラリとして使用することをさらに検討しています。Web サイト
を見ると、ライブラリには、DOM ノードの追加、削除、および更新時にアニメーションをサポートする機能があります。 しかし、これを達成するために何をすべきかについてのドキュメントやAPIが見つかりません。

より具体的にするために、以下とここに小さなサンプルを作成しました。

例では、ボタンをクリックするとポップアップが開きます。
私が望むのは、ノードがDOMに追加されたときにポップアップがフェードインをアニメーション化し、ノードがDOMから削除されたときにフェードアウトをアニメーション化することです。

配列が毎秒更新されており、マップされた配列を使用して高度なセクションを実行していて、タスクを完了できません。関数の内部にあるものに困惑していupdateTarget(updatedSource, target) {}ます。コメントと codepen はそこで終わり、dom には何も表示されません。関数は明らかに呼び出されていますが、ターゲットを新しいソースで更新する方法がわかりません。

API で Projector を使用できることに気付きましたが、stop既に DOM をレンダリングしている場合、それを削除する方法はありますか。呼び出しprojector.stop()によってプロジェクターが応答を停止するだけのようです。

質問: Maquette.js で tether.js のような外部ライブラリを使用するにはどうすればよいですか?

私の主な問題は、レンダー関数のどこかで初期化すると、どこで分解できるかわからないため、要素が再レンダリングされるにつれて、時間の経過とともにメモリリークが発生することです。

enterAnimation と exitAnimation をライフサイクル フックとして使用して実験しましたが、そのアイテムに固有の Tether の特定のインスタンスにアクセスする必要があるため、can't change event handler エラーがすぐに発生しました。

考え？ヘルプ？ありがとう！

バックグラウンド：

この 1 週間、Maquette.js を使い始めてとても楽しかったです。多くの場所でツールチップを利用するかなり大きな AngularJS v1 アプリケーションがあります。

Maquette.js でレンダリングされたビューをさらに作成することを妨げている主な理由は、Angular ツールチップ ディレクティブに依存していることです。

そこで、tether.jsとdrop.jsをいじって、ドロップダウン ポジショニング機能を利用して、それらを書き直す必要がないようにしました。

私の質問は、Maquette Javascript フレームワークのコンポーネント間の通信についてです。

コンポーネントで使用されるMenuサブコンポーネントがあるとしApplicationます。インスタンスは、アプリケーションに表示されるメイン コンテンツを交換するためApplicationに、インスタンスでメニュー項目が選択されたときに知りたいと考えてMenuいます (たとえば)。つまり、子コンポーネントとその親コン​​ポーネントの間で通信する方法が必要です。これは、Maquette でどのように実現できますか?

確かに、アプリケーション インスタンスが所有するコールバックをメニュー インスタンスに渡すことができます。このコールバックは、項目が選択されたときに呼び出されます。しかし、「選択」イベントはメニューコンポーネントの「レンダリング側」の側面にすぎないため、それを行うのは少し気が進まないので、イベントがMenuAPI に漏れないようにするのではなく、レンダリング関数内にとどまることをお勧めします。 /method 代わりに。

そこで、「レンダリング側」でイベントを扱いたいと思います。CustomEventしかし、それは の render 関数からを送信し、の render 関数内にハンドラMenuを登録する必要があることを意味していると思いますよね? このユースケースはマケットでサポートされていますか? 私のユースケースに代わる他の方法はありますか?CustomEventApplicationCustomEvent

ありがとう！

PS:より多くの回答を得るために、チケット#71から質問を再投稿しました。

Maquette ビューの HTML 文字列表現を取得して、静的 html ファイルにプリレンダリングしたいと考えています。React には ReactDOMServer.renderToString があります。Maquette VNode に同様の方法はありますか?

Typescript を使用して、Redux と Maquettejs を使用した todo-app の例に取り組んでいます。typescript をコンパイルするだけで、browserify を使用してすべての .js ファイルをバンドルします (このファイルには、アプリケーションの .ts ファイルとライブラリ [redux、maquettejs] が含まれています)。コンパイル時にエラーは発生せず、すべて問題ありません。

ブラウザで結果を表示しようとすると、このエラーが発生します。

明示的に定義されているため、少なくとも私にとっては意味がありません。私はコンパイルされたコードを判断する専門家ではありませんが、模擬実装http://jsbin.com/tenohitumi/edit?js,console,outputを作成した場合、期待どおりに動作します。何が起こっているのかよくわかりません。

念のため、これは typescript で書かれたクラス「App」です。

とにかく、匿名関数の外側 (バンドル自体) が「this」の値に影響を与える可能性があるか、またはこれが設定されないようにするかどうかを知りたいですか?