微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Rails 6/Hotwire - 当链接到某个页面时如何强制“整页加载”

如何解决Rails 6/Hotwire - 当链接到某个页面时如何强制“整页加载”

我使用的是 Rails 6 模板(Jumpstart Pro),它有新的东西 hotwire、stimulus、webpacker。它适用于基本的东西......搭建新模型并制作 CRUD 表单等。

但是我的一个页面使用了供应商的 javascript 小部件,这也需要 jquery。

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

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

%script{:src => "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"}

接着是供应商的 javascript 来初始化供应商的小部件,在 $(document).ready(function(){ init_code_goes_here }); 内,以便小部件有时间加载到页面

有效:如果我在浏览器中输入页面的 url“localhost:5000/cool_page”或“mydev.ngrok/cool_page”,它就可以正常工作。

已损坏:但是在应用中点击链接无法转到该页面(通过 link_to "cool page","/cool_page"):

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

但是如果我然后刷新页面,一切都可以正常加载。

所以如果“加载”页面可以工作,但不能通过另一个页面到达。

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

那么,问题是:在启用热线的 Rails 6 应用程序中,是否有任何方法可以设置导航链接,单击该链接时,只需告诉 Rails...跳过热线快捷方式,加载此链接页面真实

解决方法

我相信您的问题只是您需要恢复默认(非 Hotwire)链接行为。有 3 种方法可以做到这一点。

看到这个答案:https://stackoverflow.com/a/68657223/2648054

简而言之:

1:将 data-turbo 属性设置为 false。
2:设置目标属性为“_top”。
3:将链接移到任何 Turbo 框架之外。 Turbo 框架内的任何链接,如果没有上述属性之一,将默认由 Turbo 处理。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。