Turbolinks 多次导致 JavaScript 文件运行

Question

我正在使用 Rails 5.1.4，我是这个平台的新手，我遇到了 turboblinks 的问题，我有一个包含 jquery 代码的文件页面加载后必须运行，但每当页面加载文件运行s 几次，但当我禁用 turboblinks 时，它会按我想要的方式工作。所以想知道在不关掉turbolinks的情况下有没有少一个修复的。提前谢谢你..

所以有我的布局文件。// app/views/layouts/application.html.erb

<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Rails web app</title>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-
   track' => true %>
   <%= csrf_meta_tags %>
 </head>
 <body class="<%= controller_name %> <%= action_name %>">
  <%= render 'layouts/header' %>

  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>

  <div class="container">
   <%= yield %>
  </div>

  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true 
  %>
 </body>
</html>

关于我的 js 文件，如您所见，我尝试在页面加载时自动加载带有动画的 bootstrap 模态，实际上当我点击此页面上的任何 link 时就会出现问题这将我带到另一个页面，然后我尝试返回到加载 js 文件的初始页面，然后问题发生了。我看到页面刷新了很多次，还有js文件。

所以我的 js 文件有 jquery 代码。 //app/assets/javascripts/file.js

$(document).ready(function(){
  $('#myModal').on('hide.bs.modal', function (e) {
   $('.modal .modal-dialog').attr('class', 'modal-dialog animated rollOut');
  });
  $('#myModal').on('show.bs.modal', function (e) {
   $('.modal .modal-dialog').attr('class', 'modal-dialog  fadeIn  
    animated');
  });

  $('#myModal').modal('toggle');
});

Answer 1

Turbolinks 替换正文，所以将此行放在您的 head 标签中：

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

像这样：

 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Rails web app</title>
   <%= stylesheet_link_tag    'application', media: 'all' %>
   <%= csrf_meta_tags %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
 </head>
 <body class="<%= controller_name %> <%= action_name %>">
  <%= render 'layouts/header' %>

  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>

  <div class="container">
   <%= yield %>
  </div>
 </body>
</html>

或将 data-turbolinks-eval=false 添加到包含 turbolinks 的脚本标签。

您还需要使用 turbolinks:load 事件：

$(document).on('turbolinks:load', function() {
  $('#myModal').on('hide.bs.modal', function (e) {
   $('.modal .modal-dialog').attr('class', 'modal-dialog animated rollOut');
  });
  $('#myModal').on('show.bs.modal', function (e) {
   $('.modal .modal-dialog').attr('class', 'modal-dialog  fadeIn  
    animated');
  });

  $('#myModal').modal('toggle');
});

Turbolinks 多次导致 JavaScript 文件运行

Turbolinks causes JavaScript file to run several times

ruby-on-rails

turbolinks

Turbolinks 多次导致 JavaScript 文件 运行

Turbolinks causes JavaScript file to run several times

ruby-on-rails

turbolinks

Turbolinks 多次导致 JavaScript 文件运行