将 Hotwire 集成到现有 Rails 项目中的问题答案

【问题标题】：Problems Integrating Hotwire Into Existing Rails Project将 Hotwire 集成到现有 Rails 项目中的问题
【发布时间】：2021-08-07 06:48:09
【问题描述】：

我刚加入这个社区，这是我的第一篇文章。

我一直在关注几个 Hotwire 教程，并使用该技术构建了一些原型。与 JS 前端框架相比，以更少的复杂性获得类似 SPA 的响应是多么容易，这给我留下了深刻的印象。

但是，我发现当我尝试将代码和流程从我的原型转换到我现有的 Rails 项目时，它根本不起作用。更糟糕的是我不知道为什么。

我尝试使用以下一般流程编写一些跟踪代码：

包括 Hotwire 宝石
通过终端命令安装 Hotwire
包括来自相关模型的广播
在视图级别应用 turbo_stream_from 标记作为侦听器
在您希望更新模型数据的位置包含一个 turbo_frame_tag

这在我的原型中可靠地工作，但在我现有的项目中不起作用。我怀疑这可能是因为我现有的项目没有使用最新版本的 Rails 或 Ruby？（升级也不是一件容易的事。）我目前使用的是 Ruby 2.7.1 版和 Rails 6.0.2 版。

我知道我应该提供一些我的项目代码，但我什至不知道从哪里开始。如果有人能够为我提供一些指导，我将不胜感激。谢谢！

编辑：如果它有帮助的话，这些是我在尝试让 Hotwire 自动更新索引页面上的模型实例列表时收到的各种终端消息。似乎广播正在工作，但我的听众却没有？

Terminal messages when committing database changes

story index page

Code in story partial

code in my story model

EDIT: HTML Source via Chrome dev tools

【问题讨论】：

标签： ruby-on-rails ruby hotwire-rails

【解决方案1】：

想到的一件事是您的流响应中有一个<turbo-frame-tag>，这是为什么呢？我不确定这是否是它不起作用的原因，但查看他们的examples 流模板不应该包含帧标签，它应该是这样的：

<turbo-stream action="append" target="dom_id">
    <template>
         Content to append to container designated with the dom_id.
    </template>
</turbo-stream>

您确定页面上有一些 id="stories" 的 div 吗？那是流正在寻找要附加到的元素；如果它找不到一个，什么都不会发生。

【讨论】：

Joel_Blum，感谢您抽出宝贵时间回复！似乎涡轮框架标签设置正确。我已经通过 Chrome 开发工具使用 HTML 源代码的屏幕截图更新了 OP。新模型实例正确附加到页面。问题是它们仅在我刷新页面时才更新。它们不会像正确的 Hotwire 设置所期望的那样自动更新（没有页面刷新）。仍然不知所措...
无赖所以不是那样的。我在这里要求很多，但你认为你可以在 github 上创建一个小应用程序来重新创建这个问题并分享它吗？届时我将能够更深入地了解。

【解决方案2】：

我想回到这篇文章报告我没有找到解决方案。尽管花费了超过一周的全职时间来尝试调试此问题。

最后，使用最新版本的 Ruby、Rails 和所有 gems 开始一个新的 repo 变得更快、更容易。我继续简单地将尽可能多的代码复制并粘贴到新的存储库中。除此之外，我使用终端命令追溯了我的步骤，基本上创建了原始应用程序的克隆。

你瞧，它起作用了。

新应用使用 Ruby 3.0.1 版和 Rails 6.1.3.2 版。该应用程序的旧版本（无法运行的版本）在 Ruby 版本 2.7.1 和 Rails 版本 6.0.2.2 上运行。

感谢所有伸出援手尝试帮助我解决此问题的人。

【讨论】：