Rails、Javascript 和 Turbolinks - 功能不可用答案

【问题标题】：Rails, Javascript & Turbolinks - function not availableRails、Javascript 和 Turbolinks - 功能不可用
【发布时间】：2015-05-21 09:01:19
【问题描述】：

我有一个 Rails 应用程序，我正在尝试将我的 javascript 组织到特定于页面的 javascript 文件中，并且仅在页面需要时才加载它。我使用第二个清单文件为我的“goal_designer”页面加载页面特定的 javascript。

如果我在我的goal_designer 页面上执行“查看页面源代码”（在我点击链接后，不重新加载它），我确认已添加 js 文件：

<script src="/assets/application.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/files/goal_designer.js?body=1"></script>
<script src="/assets/goal_designer_bundle.js?body=1"></script>

但是，如果我尝试使用此文件中的函数，它将不起作用。如果我重新加载页面，它可以正常工作并且可以使用该功能。

在我的 app/assets/files/goal_designer.js 我有：

$(document).on('page:change', function(){
  hello_there_1();
});  

$(document).on('page:load', function(){
  hello_there_1();
});  

function hello_there_1() {
  alert("hello_there_1");     
}

hello_there_1 仅在我重新加载页面时触发，而不是在我导航到它时触发。我的理解是，goal_designer.js 应该可用，因为它已添加到此页面上，并且 hello_there_1() 函数应该可用，但情况似乎并非如此。因此，一旦页面：加载，则该函数应该触发。

另一件事 - 如果我查看 Chrome 调试器（来源）中的资产列表，goal_designer.js 仅在我重新加载页面时才会出现在列表中，而不是在我导航到它时（即使它在“页面”中）来源'好的）。

我处于开发模式，所以我认为所有 js 都将被预加载或可供引用。这是正确的吗？
如果我点击一个页面，并且页面特定的 js 被添加到头部，如何从这个新加载的文件中将 addEventListener 绑定到页面上的对象？

仅供参考 - 其他信息 - 我认为我做得对。我在我的goal_designer.html.erb 中使用此代码：

<% content_for :head do %>
  <%= javascript_include_tag 'goal_designer_bundle' %>
<% end %>

这在我的 application.html.erb 中：

<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= yield :head %>

在我的 app/assets/javascripts 中有一个清单文件，goal_designer_bundle.js，其中包含：

//= require ./files/goal_designer

【问题讨论】：

标签： javascript ruby-on-rails turbolinks

【解决方案1】：

根据设计，Turbolinks 不会更新 <head> 部分，只会更新正文。这个想法是在初始页面加载时请求您的 JS 和 CSS 一次，随后的请求通过使用 AJAX 并简单地替换正文来避免这种情况。因此，按照 Turbolinks 设计的工作方式，您的 content_for :head 块将无法工作。

从哲学上讲，您的方法与 Turbolinks 的工作方式非常不同，所以如果您打算使用它，我只会禁用 Turbolinks。

【讨论】：

谢谢巴特。我已经阅读了很多关于此的博客，我显然混淆了这些建议。我更喜欢使用 Turbolinks 方法，所以有没有办法拥有特定于页面的 js，或者这也是相反的理念？我想我可以列出 application.js 中的所有 js 文件以进行 turbolinks 管理，然后在文件中使用控制器操作标识符来激活页面上的代码：更改？