问题标签 [hotwire-rails]

我对 rails 和 webpacker 非常陌生，无法弄清楚这里发生了什么。当我从浏览器的地址栏中“完全加载”我的应用程序时，工具提示和弹出框没有被实例化，并且我收到如下错误：

• application.js:32 Uncaught TypeError: $(...).tooltip 不是函数

但是，当我从应用程序中加载页面时（单击导航栏中的链接），工具提示和弹出框按预期工作。另外，如果我去 chrome 控制台并手动实例化它们，工具提示和弹出框开始工作：

$('[data-bs-toggle="tooltip"]').tooltip();

以下是我认为相关的一些配置：

包/application.js

webpack/environment.js

webpack/custom.js：

布局/application.html.erb：

包.json：

turbo 手册target: '_top' 在此处和此处进行了说明。

但是我还是不明白这两种形式有什么区别：

#1

#2

两种形式都会通过 GET 方法发送一个普通的 HTML 格式请求，整个页面将被 Turbo Drive 替换。因此，在这种情况下，它们的行为看起来非常相似。

仅当我希望内容在框架外导航时需要通过 Turbo Frametarget: '_top'的属性延迟加载某些内容时才有用？src：

我正在使用一个 Rails 6 模板（Jumpstart Pro），它有新的东西 hotwire、stimulus、webpacker。它适用于基本的东西......搭建新模型和制作 CRUD 表单等。

然而，我的一个页面使用供应商的 javascript 小部件，这也需要 jquery。

Jumpstart Pro 模板及其论坛都没有任何最新的文档或支持通过 webpacker 添加 jQuery（例如，不支持以“正确的方式”添加 jquery）。

所以我通过页眉中的一个很好的老式脚本标签将 jquery 添加到需要它的一个页面

其次是供应商的javascript来初始化供应商的小部件，$(document).ready(function(){ init_code_goes_here });这样小部件就有时间加载到页面上。

工作：如果我在浏览器“localhost:5000/cool_page”或“mydev.ngrok/cool_page”中输入页面的url ，它工作正常。

损坏：但单击应用程序中的链接以转到页面（通过link_to "cool page", "/cool_page"）不起作用：

• jQuery 已加载（我有一个小“hello world”jquery 脚本，它取消隐藏 div 以确认 jquery 已加载）
• 供应商小部件未正确加载（浏览器控制台显示小部件对象为空）

但是，如果我然后刷新页面，一切都会正常加载。

因此，如果“加载”了该页面，但它不能通过另一个页面到达，则该页面可以工作。

由此我推断，当我导航到它时，hotwire/etc 背后的魔力会干扰页面的正确加载。

所以，问题是：在一个支持热线的 Rails 6 应用程序中，有没有办法有一个导航链接，当点击时，它会告诉 Rails...跳过热线快捷方式，真正加载这个页面？

我的问题：使用 Hotwire/Turbo 渲染图像时，所有 URL 都使用主机example.org而不是我的实际主机名呈现。常规视图很好，但通过 Turbo 流呈现部分会导致 ActiveStorage URL，例如http://example.org/.../.

上下文：我有一个简单的 Todo 应用程序，具有工作视图、部分和 turbo 流，它们一起显示 Todo 和关联用户列表。当我将用户加入 Todo 时，turbo 流会呈现正确的部分，并将用户的名称和头像放在我想要的 DOM 中。但是，来自 ActiveStorage 的图像 URL 包含example.org主机名。

我在 中设置了标准 URL 选项config/environments/*.rb，包括routes.default_url_options[:host]和config.action_mailer.default_url_options[:host]。我还了解了文件config/initializers/application_controller_renderer.rb，您可以在其中设置http_host参数；但是，我已经设置http_host了https布尔值，并且 Turbo 仍在image_tag使用 example.org 渲染我。

此外，我发现有关如何以编程方式操作默认渲染器的建议有限（以解决问题）。该来源说要获取ApplicationController.renderer并覆盖属性，如下所示：

但是这些broadcast_action_to方法似乎不接受renderer参数，所以这实际上对我在 Turbo 中没有帮助。

一定有我遗漏的配置，但我在 Turbo 或 Hotwire 文档中找不到它。

当我们在发布请求中返回涡轮帧时，有时运行 javascript 是必不可少的，例如，如果我正在调用资源进行更新，则有两种可能的情况

1. 当它成功保存然后关闭模态
2. 如果未保存，则以模式显示验证消息

在这两种情况下，我都在发送帧（有意不使用重定向或渲染）。

最近我在 github 中发现了这个问题和 PR，现在已合并。 https://github.com/hotwired/turbo/pull/192

但尚未记录如何实际使用它，需要帮助

我的页面上有一个 Turbo Frame，它使用src属性来加载/chats/. 在这个框架内，我希望能够知道主页面是否正在使用控制器的show操作groups，即页面的 URL 位于/groups/group_name.

Usingcurrent_page?(controller: 'groups', action: 'show')返回 false，因为它在chats控制器中看到自己。我该如何解决这个问题？

我有以下代码可以在浏览器控制台中运行，这些代码似乎可以与我的所有 fontawesome 图标一起按预期工作......

但是，当我在应用程序中运行它时，它适用于这些图标......

但它不适用于这些图标...

我唯一的猜测是其中一个是使用 svg 图层，而另一个不是。我已经在网上挖遍了这件事，我一无所获。有没有人对此有想法或指示？

更新

当我不使用图层进行计数时，它可以完美运行。想法？

我正在尝试从 Turbolinks 升级到 Turbo，但我发现客户端没有为表单提交呈现重定向。

版本：

• 导轨 6.1.4
• hotwire-rails 0.1.2
• @hotwired/turbo-rails 7.0.0-beta.8

我暂时忽略了 Turbo 和 Devise 之间的不兼容性——只是试图让常规表单工作而不必禁用它们上的 Turbo。

这是一个示例操作：

这是一个呈现的形式：

提交有效表单时，服务器会说Processing by LabelsController#create as TURBO_STREAM并正确提供 302。然后它将为重定向位置提供 200。然而，浏览器只查看提交的表单。将重定向状态更改为 303 不会改变任何内容。

我为每个 Turbo 事件添加了一个 console.log：

这是成功提交表单的输出：

没有渲染事件。调查它似乎完全意识到客户端应该重定向，它只是没有event.detail.fetchResponse.response。turbo:submit-end

在那里，我在多年仅将 Rails 用于 API 之后又回到了它。有各种各样的新事物，我试图弄清楚如何使用新框架完成一些事情。一个例子是创建一个带有动态关联的表单accept_nested_attributes并添加动态has_many关联。

我有Company模型和Partner模型。

在我的表格中，我有：

我有一个 js 控制器，它使用按钮向表单添加新行以添加更多合作伙伴：

现在这一切都工作正常，但是我觉得 js 控制器有点 hacky，从一个合作伙伴复制 HTML 输出并将其粘贴到我的控制器中并进行一些插值......我觉得我可能有一些方法可以得到该模板直接来自 Rails 后端，因此我将其全部定义在一个地方的部分或其他地方，但我不确定如何连接这些点。

有没有办法将合作伙伴表单移动到表单中下一行的部分并动态提取代码并通过 JS 插入它，还是我需要继续做我正在做的复制/粘贴操作？

我有一个表单，我想在任何输入字段更改时自动提交。我正在使用 Turbo Streams，如果我使用onchange: "this.form.submit()"它，Turbo Streams 不会捕获它，并且 Rails 使用标准的 HTML 响应。单击提交按钮时它工作正常。我该如何解决这个问题？