Ruby on Rails 5 - Turbolink 3 无法正常工作答案

【问题标题】：Ruby on Rails 5 - Turbolink 3 did not work correctlyRuby on Rails 5 - Turbolink 3 无法正常工作
【发布时间】：2015-08-21 06:03:51
【问题描述】：

我正在使用 Ruby on Rails 5 并使用 turbo-link，如下所示：

<%= javascript_include_tag 'custom-plugins', 'data-turbolinks-track' => true %>

在 Ruby On Rails 4 上运行良好，但在 Ruby on Rails 版本 5 上出现问题。单击返回后，js/css 无法正确加载。

任何帮助将不胜感激。

【问题讨论】：

不加载到底是什么意思？
我打开我的网站 www.example.com -> 一切正常我打开另一个页面 -> www.example.com/xyz 然后单击返回按钮，现在页面无法正确呈现。
你的意思是说页面渲染不起作用？还是 JS 函数没有加载？
表示 JS 和 CSS（引导不工作）
您是否尝试过实际执行任何基本的调试步骤？在浏览器中打开 Web 控制台并检查错误 - 如果不能立即告诉您出了什么问题，请将特定错误消息添加到您的问题中。对于自称开发人员的人来说，您也许应该知道，任何人都可以做任何事情，但只能用这种模糊的错误描述来猜测。

标签： ruby-on-rails ruby turbolinks ruby-on-rails-5

【解决方案1】：

参考Rails 5 Awesome features

Turbolinks 自第 4 版以来一直是 Rails 的一部分，这可能是人们讨厌或喜欢的功能之一；这里没有中间立场。

在 Rails 5 中，我们将收到一个新版本，借助 HTML5 自定义数据属性，我们希望在 Rails 应用程序中实现更快的速度和渲染。

这个新版本最重要的变化是部分替换功能。从客户端，我们将能够告诉 Turbolinks 我们需要更改/替换哪些内容以及不需要更改/替换哪些内容。

Turbolinks 将寻找 HTML5 自定义属性并决定我们的替换策略。

要在客户端触发替换，我们可以使用或更新我们的 .和之间的区别在于，第一个将向服务器发出 a 以获取必须用于替换我们的 HTML，而从我们那里期望应该用于其操作的 HTML。

使用这两个函数，我们可以将带有 HTML 元素或 HTML 元素数组的散列传递给 or。

Action  Result
Turbolinks.visit(url, { change: ['entries'] })  Will replace any element with custom attribute and any element with its id listed in change.
Turbolinks.visit(url)   Will keep only elements with custom attribute and replace everything.
Turbolinks.visit(url, { keep: ['flash'] })  Will keep only elements with custom attribute and any element with its id listed in keep, everything else will be replaced.
Turbolinks.visit(url, { flush: true })  Will replace everything

我们可以使用 and 从服务器端触发相同的功能，两者都可以接收和作为选项，但也可以使用或强制重定向使用或不使用 Turbolinks。

无论您是否喜欢 Turbolinks，这可能是尝试并确定它是否适合您的应用程序某个地方的好时机。

【讨论】：

【解决方案2】：

在带有 js 的 turbolinks 中很常见。 Turbolinks 有助于更快地加载特定页面。但它有时也会阻止 js 运行。所以在加载这个特定页面时使用这一行

<%= link_to "example_page", example_page_path, :"data-no-turbolink" => true %>

或把这个写在你的布局中

<body <%= "data-no-turbolinks='true'".html_safe if controller_name=="example_controller" && action_name=="example_page" %>>

阻止 turbolink 在此特定页面中工作。

【讨论】：