Question

我正在使用Rails 5.1.4，我是平台上的新手，我遇到了turboblinks的问题，我有一个包含jquery代码的文件，一旦页面加载就必须运行，但每当页面加载文件运行时好几次，但是当我禁用涡轮连杆时，它就像我想要的那样工作。所以我想知道如果没有关闭涡轮连杆，是否还有一个可以解决它。提前谢谢..

所以有我的布局文件.// 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文件，你会看到我尝试在页面加载时自动加载带动画的引导模态，实际上问题发生在我clik到这个页面上的任何链接，它带我到另一个页面，我尝试回到加载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取代了身体，所以把这条线放在你的头标记中：

<%= 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 event：

$(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文件多次运行

1 个答案: