rails中的TurboLink与使用javascript的Alpine JS下拉列表和Hubspot表单相冲突

我在Rails+和方面遇到问题

该问题是由于与“联系我们”页面上的Hubspot联系人表单冲突造成的。以下是网站：

“联系我们”链接位于页脚中，我正在以关闭TurboLink的方式链接到“联系我们”页面：

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

您可以在直接访问该页面，但请确保在第一次访问该页面时注意到“下拉闪光灯”

如果我在链接到Contact Us页面时没有关闭turbolinks，那么turbolinks会破坏通过javascript加载的Hubspot表单，这是该页面的一个要求

因为我在您第一次访问该网站时就关闭了此“联系我们”页面的turbolinks，因此会触发使用Alpine JS的下拉列表。这是一个快速闪现，一旦下拉列表缓存在turbolinks中，就不会再发生这种情况，但我无法在访问Contact Us页面时找到正确的方法来加载所有这些JS需求，如果没有下拉闪现的话

我应该如何在Rails中做到这一点，以便在访问Contact Us页面时，在不破坏Hubspot表单或重新加载所有javascript（导致下拉闪烁）的情况下在站点的其余部分使用TurboLink

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

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

然后，通过网页包加载Alpine JS（它是用纱线安装的）。然后通过页面主体中的内联javascript加载Hubspot表单。它看起来像这样（\u hubspot\u contact\u form.html.erb）：

hbspt.forms.create({
portalId:“此处的HUBSPOT账号”，
表格：“90fb717a-6ce5-42e1-9e6d-aa1470042cbc”
});

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

---

Alpine.js

x-show

通过在元素上切换

style=“display:none；”“

来工作，因此您可以自己将其添加到代码中（下面的示例基于我从您的站点获取的源代码）

这样，当页面加载时，无论加载了什么JavaScript，它都以隐藏开始，但Alpine.js将在加载后控制该样式属性

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

...

根据文档将其放入您的

CSS

。这比在每个组件上放置

display:none

要好一点，因为它隐藏了整个页面：

[x-cloak] { display: none; }

---

Alpine初始化时，会从元素中删除

x-clope

属性。这对于隐藏预初始化的

DOM

非常有用。典型的做法是添加以下全局样式以使其生效。

如Alpine在其自述文件中所建议的，使用

来自CDN

只需在页面中的Alpine脚本之前包含

来自NPM的

安装软件包

npm i alpine-turbo-drive-adapter

将其与Alpine JS一起包含在脚本中

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

---

谢谢接受！我将为其他寻找相同问题的人编辑措辞。您是否向父html标记添加了x-斗篷？你也可以把它贴在标签上，这对我来说很有用。

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