Rails 中的 Turbolinks 与使用 javascript 的 Alpine JS 下拉列表和 Hubspot 表单冲突答案

【问题标题】：Turbolinks in rails is conflicting with Alpine JS dropdown and Hubspot form that uses javascriptRails 中的 Turbolinks 与使用 javascript 的 Alpine JS 下拉列表和 Hubspot 表单冲突
【发布时间】：2020-10-05 07:35:24
【问题描述】：

我在使用 Rails Turbolinks + Alpine JS 和 TailwindCSS drop-downs 时遇到问题。

问题是由于与“联系我们”页面上的 Hubspot 联系表单冲突。这是网站：

bailoutwatch.org

联系我们链接在页脚中，我链接到联系我们页面的方式是关闭 turbolink：

<%= link_to "Contact Us", contact_path, data: { turbolinks: false } %>

您可以直接通过bailoutwatch.org/contact 访问该页面，但请务必在第一次访问该页面时注意“Dropdown flash”。

如果我在链接到“联系我们”页面时没有关闭 turbolinks，那么 turbolinks 会破坏通过 javascript 加载的 Hubspot 表单，并且该表单是该页面的要求。

因为我在您第一次访问该网站时关闭了此“联系我们”页面的 turbolinks，所以它会触发使用 Alpine JS 的下拉菜单。这是一个快速的 Flash，一旦下拉列表被缓存在 turbolinks 中，它就不会再发生了，但是在访问“联系我们”页面时，如果没有该下拉列表，我无法找出加载所有这些 JS 要求的正确方法。

我应该如何在 Rails 中执行此操作，以便在访问“联系我们”页面时可以在站点的其余部分使用 turbolink，而不会破坏 Hubspot 表单或重新加载所有 javascript（导致下拉菜单闪烁）？

我正在通过我的标题加载 js，如下所示：

<%= javascript_pack_tag "application", "data-turbolinks-track": "reload" %>

然后，通过 webpack 加载 Alpine JS（它与 Yarn 一起安装）。然后通过页面正文中的内联 javascript 加载 Hubspot 表单。它看起来像这样（_hubspot_contact_form.html.erb）：

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "HUBSPOT ACCOUNT NUMBER HERE",
    formId: "90fb717a-6ce5-42e1-9e6d-aa1470042cbc"
});
</script>

这是我正在描述的“下拉闪光灯”的屏幕截图。

【问题讨论】：

标签： javascript ruby-on-rails webpack turbolinks alpine.js

【解决方案1】：

正如 Alpine 在其自述文件中建议的那样，使用 Turbolinks Adapter

来自 CDN

只需在页面中的 Alpine 脚本之前包含 <script src="https://cdn.jsdelivr.net/npm/alpine-turbo-drive-adapter@1.0.x/dist/alpine-turbo-drive-adapter.min.js" defer></script>

来自 NPM

安装包

npm i alpine-turbo-drive-adapter

将它与 Alpine JS 一起包含在您的脚本中。

import 'alpine-turbo-drive-adapter'
import 'alpinejs'

【讨论】：

【解决方案2】：

根据文档将其放入您的CSS。这比将display:none 放在每个组件上要好一些，因为它会隐藏整个页面：

[x-cloak] { display: none; }

x-cloak 属性在 Alpine 初始化时从元素中删除。这对于隐藏预初始化的DOM 很有用。通常添加以下全局样式以使其正常工作。

【讨论】：

您是否将 x-cloak 添加到父 html 标记？
你也可以把它放在标签上，这通常对我有用。

【解决方案3】：

Alpine.js x-show 通过在元素上切换 style="display: none;" 来工作，因此您可以自己在代码中添加它（下面的示例，基于我从您的网站提取的源代码）。

这样，当页面加载时，无论加载了什么 JavaScript，它都会从隐藏状态开始，但是一旦加载，Alpine.js 将控制该样式属性。

<div x-data="{ isOpen: false }" ...>
  <div x-show="isOpen" style="display: none;" ...>
    ...
  </div>
</div>

【讨论】：

感谢您的接受！我将为寻找相同问题的其他人编辑措辞。