問題タブ [hotwire-rails]

ホットワイヤー、刺激、webpacker などの新しい機能を備えた Rails 6 テンプレート (Jumpstart Pro) を使用しています。基本的なものには問題なく機能します...新しいモデルの足場やCRUDフォームの作成など。

ただし、私のページの 1 つはベンダーの JavaScript ウィジェットを使用しており、これには jquery も必要です。

Jumpstart Pro テンプレートもそのフォーラムも、webpacker を介して jQuery を追加するための最新のドキュメントやサポートを提供していません (たとえば、「正しい方法」で jquery を追加するためのサポートはありません)。

だから私は、ヘッダーの古き良きスクリプトタグを介して、それを必要とする1つのページにjqueryを追加しました

その後、ベンダーの JavaScript を使用してベンダーのウィジェットを初期化し、内部$(document).ready(function(){ init_code_goes_here });でウィジェットがページにロードする時間を確保します。

動作:ページの URLをブラウザーに「localhost:5000/cool_page」または「mydev.ngrok/cool_page」と入力すると、正常に動作します。

壊れています: しかし、アプリ内のリンクをクリックしてlink_to "cool page", "/cool_page"(経由で) ページに移動しても機能しません:

• jQuery が読み込まれます (jquery が読み込まれていることを確認するために div を非表示にしない小さな「hello world」jquery スクリプトがあります)
• ベンダー ウィジェットが正しくロードされない (ブラウザ コンソールでウィジェット オブジェクトが null であると表示される)

しかし、ページを更新すると、すべて正常に読み込まれます。

したがって、ページは「ロード」された場合は機能しますが、別のページを介して到達した場合は機能しません。

このことから、hotwire/etc の背後にある魔法が、ページに移動したときにページの適切な読み込みを妨げていると推測します。

では、問題は、ホットワイヤー対応の Rails 6 アプリで、クリックしたときに単に Rails に指示するナビゲーション リンクを設定する方法はありますか? ホットワイヤー ショートカットをスキップして、このページを実際にロードすることです。

私の問題: Hotwire/Turbo を使用して画像をレンダリングすると、すべての URLexample.orgが実際のホスト名ではなくホストでレンダリングされます。通常のビューは問題ありませんが、Turbo ストリームを介してパーシャルをレンダリングすると、http://example.org/.../.

コンテキスト: 私は、Todo と関連付けられたユーザーのリストを一緒に表示する作業ビュー、部分ストリーム、およびターボ ストリームを備えた単純な Todo アプリを持っています。ユーザーを Todo に参加させると、ターボ ストリームが正しいパーシャルをレンダリングし、ユーザーの名前とアバターを DOM の必要な場所に配置します。ただし、ActiveStorage からのイメージ URL にはexample.orgホスト名が含まれています。

config/environments/*.rb、 、 を含むroutes.default_url_options[:host]で、標準の URL オプションを設定しましconfig.action_mailer.default_url_options[:host]た。また、パラメーターconfig/initializers/application_controller_renderer.rbを設定できるファイルについても学びました。http_hostただし、ブール値を設定http_hostしましたがhttps、それでも Turbo はimage_tagexample.org でレンダリングしています。

さらに、(問題を修正するために) デフォルトのレンダラーをプログラムで操作する方法についての限られたアドバイスを見つけました。このソースは、次のようにプロパティを取得ApplicationController.rendererしてオーバーライドするように指示しています。

しかし、broadcast_action_toメソッドはパラメーターを受け入れないように見えるrendererため、これは実際には Turbo 内では役に立ちません。

見落としている構成があるはずですが、Turbo または Hotwire のドキュメントには見つかりません。

私はブラウザコンソールで実行できる次のコードを持っています..

ただし、アプリケーションでこれを実行すると、これらのアイコンに対して機能します...

しかし、これらのアイコンでは機能しません...

ここでの私の唯一の推測は、そのうちの1つはsvgレイヤーを使用しており、もう1つは使用していないことです。私はこれについてネット全体を掘り下げましたが、空白になっています。誰かがこれについて考えや指針を持っていますか?

アップデート

カウントにレイヤーを使用しない場合、完全に機能します。考え？

Turbolinks から Turbo にアップグレードしようとしていますが、クライアントがフォーム送信のリダイレクトをレンダリングしていないことがわかりました。

バージョン:

• レール 6.1.4
• ホットワイヤーレール 0.1.2
• @hotwired/turbo-rails 7.0.0-beta.8

今のところ、Turbo と Devise の間の非互換性は無視しました。Turbo を無効にすることなく、通常のフォームを機能させようとしているだけです。

アクションの例を次に示します。

レンダリングされたフォームは次のとおりです。

有効なフォームを送信すると、サーバーはProcessing by LabelsController#create as TURBO_STREAM302 を正しく送信します。その後、リダイレクト先の 200 を送信します。ただし、ブラウザは送信されたフォームを見るだけです。リダイレクト ステータスを 303 に変更しても、何も変わりません。

Turbo イベントごとに console.log を追加しました。

これは、フォーム送信が成功した場合の出力です。

レンダリング イベントはありません。それを調査event.detail.fetchResponse.responseするturbo:submit-endと、クライアントがリダイレクトする必要があることを完全に認識しているようですが、そうではありませんでした。

入力フィールドが変更されるたびに自動的に送信したいフォームがあります。Turbo Streams を使用onchange: "this.form.submit()"していますが、Turbo Streams によってキャプチャされず、Rails は標準の HTML 応答を使用します。送信ボタンをクリックすると正常に動作します。どうすればこれを回避できますか?