问题标签 [turbolinks]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1041 浏览

jquery - 从另一个页面链接后,Rails 中的 JQuery 失败,适用于页面加载

我在我的主页上有一个引用旋转器。当我直接从浏览器加载页面时(在浏览器中输入地址并按回车键),它工作正常。但是,如果我单击指向我网站中另一个页面的链接,然后链接回主页,它就会停止工作。更具体地说,引号开始重叠,就好像该方法的两个实例正在运行一样。

我认为这可能是javascript加载方式的问题。由于我在网站的另一个页面上有一个选项卡脚本,它可以正常加载,但是如果我链接离开并返回到该页面,它就不再起作用了......

在控制台中没有收到错误。

我在 Ubuntu 12 上运行 Rails 4、Ruby 2.0.0、Foundation,并使用 WebBrick 进行测试。Gemfile 发布在下面:

脚本:

应用程序.js

0 投票
1 回答
194 浏览

ruby-on-rails - Ink 文件选择器不适用于 Turbolinks

当您在 Rails 应用程序中单击具有文件选择器按钮的页面时,该按钮不会呈现。我认为这是因为它仅在窗口加载时触发。Turbolinks 需要回调 page:load。

如何修复/解决?

0 投票
1 回答
463 浏览

javascript - Rails turbolink和淡入淡出效果的问题

我对日期 turbolink 回调有疑问。我想在更改页面上创建淡入淡出效果。我试过这段代码:

但是 'page:restore' 不会触发,并且当 'page:fetch' 发生页面突然刷新新内容时。

0 投票
2 回答
2054 浏览

javascript - Rails 4,recaptcha 和 turbolinks

我正在尝试以我的一种形式实现 recaptcha。我在我的表单中使用下面的代码

如果我点击包含recaptcha 的页面的链接,它不会显示。如果我然后使用浏览器重新加载页面,则会显示它。

我发现这是由于使用了 turbolinks。

我知道放置data-no-turbolink在body标签中可以防止该页面的turbolinks并且这有效,但我不确定这是否是正确的方法,如果我想为整个页面禁用它只是为了让recpatcha工作(似乎很hacky )。

我还将recaptcha代码包含在一个div中并放入data-no-turbolink标签,但这不起作用。

有没有办法只为带有recaptcha的表单禁用turbolinks,或者我应该尝试另一种方法来解决这个问题?

0 投票
1 回答
519 浏览

ruby-on-rails - Rails App:预编译资产失败

我正在尝试将我的 rails 应用程序推送到 Heroku,但出现此错误:

“找不到文件'turbolinks' - 但是'turbolinks”在我的gemfile(附件)中。

0 投票
2 回答
364 浏览

javascript - 无法解析符号“turbolinks”

我正在做一个 Rails 教程。turbolinks 已安装和更新,所有这些都在 gemfile 中,但在 app/assets/javascripts/application.js 中出现了一个错误,说它无法解析符号。如果您想仔细查看,github 存储库位于https://github.com/torin555/sample_app 。

0 投票
2 回答
1088 浏览

javascript - Youtube 可以很好地与 Turbolinks 一起玩吗?

我正在开发一个 Rails4 应用程序,它将能够在我的应用程序页面中嵌入和播放托管在 Youtube 上的视频。我需要挂钩一些视频播放器的事件,所以我通过 API 调用创建 Youtube 对象:

这在第一次加载页面时效果很好,但是当用户在启用了 turbolinks 的页面之间导航时不起作用,因为文档就绪事件不会触发,因此 Youtube 代码不知道发出回调到onYouTubeIframeAPIReady().

所以,我想知道除了事件之外,是否有任何解决方法可以让 Youtube API 为page:change事件调用 API Ready 方法以使其与 turbolinks 一起使用document.ready?我已经尝试挖掘从 Youtube 下载的 api 脚本,但在其中找不到任何可以解决问题的东西,而且我也有点犹豫要运行 Youtube 脚本的本地版本。

0 投票
3 回答
28647 浏览

javascript - Rails 4 turbo-link 阻止 jQuery 脚本工作

我正在构建一个 Rails 4 应用程序,我有一些分散的 js 文件,我试图包含“rails 方式”。我将 jquery 插件移到 /vendor/assets/javascripts 中,并更新了清单 (application.js) 以要求它们。当我在本地加载页面时,我看到它们显示正确。

但是,我从一个已编译的脚本中得到了不一致的行为。我有一个名为 projects.js 的特定于控制器的 js 文件,它在 application.js 中通过以下方式引用require_tree .

我看到该文件已正确包含,并且可以正常工作……一半时间。另一半时间,projects.js 中的东西似乎没有做任何事情(主要是 jquery 动画和一些 ajax 请求)。当它不起作用时,我会单击按钮几次,什么都不会发生,然后我会抛出这个错误:

当脚本位于单独的视图中时(错误的方式),这从未发生过,所以我相当确定问题不在于我的 javascript 代码。另一个可能相关的细节是 projects.js 中的内容被包装在一个$(document).ready(function(){. 另外,我正在开发模式下进行测试,因此资产管道不会将 javascripts 和 css 组合在一起。

知道这里发生了什么吗?我是 Rails 的新手,但我已尽力遵守所有惯例。

更新!

我的项目脚本不起作用时,这是可以预见的。第一个页面加载每次都有效。然后我单击一个链接到一个使用我的 project.js 行为的新页面,而第二个页面永远不会工作。我点击了几次,最终抛出了上面的错误。我仍然不确定为什么,但我怀疑这与涡轮链接有关。

0 投票
19 回答
174794 浏览

javascript - Rails 4:如何将 $(document).ready() 与 turbo-links 一起使用

在尝试“以 Rails 方式”组织 JS 文件时,我在 Rails 4 应用程序中遇到了问题。它们以前分散在不同的视图中。我将它们组织成单独的文件并使用资产管道编译它们。然而,我刚刚了解到,当 turbo-linking 打开时,jQuery 的“就绪”事件不会在随后的点击中触发。第一次加载页面时它可以工作。但是当你点击一个链接时,里面的任何东西ready( function($) {都不会被执行(因为页面实际上并没有再次加载)。很好的解释:这里

所以我的问题是:在 turbo-links 开启时,确保 jQuery 事件正常工作的正确方法是什么?您是否将脚本包装在特定于 Rails 的侦听器中?或者也许 Rails 有一些魔力让它变得不必要?文档对于这应该如何工作有点含糊,尤其是关于通过诸如 application.js 之类的清单加载多个文件。

0 投票
2 回答
1608 浏览

ruby-on-rails - 使用 Rails/Link_to/Haml/turbo-links 传递两个参数

我正在尝试传递两个参数,data-no-turbolinks并且mobile

这有效:

(1) %a{href: "#{test_path}", data: { no: { turbolink: true }}} %span Test

这转化为


现在我需要向这个链接添加一个参数:mobile

以下所有方法均无效!

(1)%a{href: "", mobile: 1, data: { no: { turbolink: true }}}

(turbo-link 正确通过,而不是手机)

(2)%span= link_to "Mobile", {mobile: 1, data: { no: { turbolink: true }}}

(3)%span= link_to "Mobile", {'mobile' => 1, 'data-no-turbolink' => true }

(4)%span= link_to "Mobile", url_for('mobile' => 1, 'data-no-turbolink' => true)

(5) %span= link_to "Mobile", data: {mobile: 1, no: {turbolink: true} }