为什么 Turbolinks 不能正常工作？ Rails 应用程序答案

【问题标题】：Why is Turbolinks not working properly? Rails app为什么 Turbolinks 不能正常工作？ Rails 应用程序
【发布时间】：2016-09-07 13:08:56
【问题描述】：

想知道为什么 turbolinks 不能正常工作……快把我逼疯了。当我刷新页面时，一切正常。但是，第一次导航到页面时，javascript 无法正确加载。请参阅下面的 slick.js 以供参考。

第一次导航到任何页面时。
- 在页面实际呈现之前弹出警报
- javascript 功能失败
当导航回到我已经在当前会话中的页面时。 body 的内容在弹出警报之前清楚地加载，并且 javascript 功能按预期工作。

有什么想法吗？如果您需要更多信息，请告诉我，我相信我在下面包含了重要文件。谢谢！

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.5.2'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.15'
# Use SCSS for stylesheets
gem 'sass-rails'

# gem 'sassc-rails'


# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
# gem 'turbolinks'

gem 'jquery-turbolinks', '~> 2.1'

gem 'turbolinks', '~> 5.0.0.beta1'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# HTML5/CSS Framework
gem 'bourbon', '4.2.6'
gem 'neat', '1.7.4'
gem 'bitters', '1.2.0'
gem 'refills', '0.1.0'



gem 'normalize-rails', '~> 4.1', '>= 4.1.1'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
  gem "rspec-rails"
    gem "factory_girl_rails", "~> 4.0"
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

应用程序.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require refills/centered_navigation
//= require slick

application.html.erb

<!DOCTYPE html>
<html>
<head>
    <title>MySite</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>

    <link href='https://fonts.googleapis.com/css?family=Candal' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>


</head>
<body>
    <!-- <div class="appWrap"> -->

    <%= render 'refills/centered_navigation' %>
    <div class="wrapper-for-content-outside-of-footer">
        <!-- Uncomment this whole section for a sticky footer. The content of the page should be inside of this .wrapper-for-content-outside-of-footer -->
        <%= yield %>
    </div>
    <%= render '/refills/footer_2' %>


    <!-- </div> -->

</body>
</html>

_ecommerce.html.erb

<div class="slider-container">
    <!-- Add nice arrow images for the slider -->
    <div class="prev">  <   </div>
    <div class="next">  >   </div>

    <div class="product-slider">
        <div>
            <img src="http://placehold.it/2000x750">
        </div>
        <div>
            <img src="http://placehold.it/2000x750">
        </div>
        <div>
            <img src="http://placehold.it/2000x750">
        </div>
    </div>

</div>

<div class="row column text-center">
    <h2>Our Newest Products</h2>
    <hr>
</div>

<div class="row small-up-2 large-up-4">
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button expanded">Buy</a>
    </div>
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button expanded">Buy</a>
    </div>
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button expanded">Buy</a>
    </div>
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button expanded">Buy</a>
    </div>
</div>
<hr>
<div class="row column">
    <div class="callout primary">
        <h3>Really big special this week on items.</h3>
    </div>
</div>
<hr>

<div class="row column text-center">
    <h2>Some Other Neat Products</h2>
    <hr>
</div>

<div class="row small-up-2 medium-up-3 large-up-6">
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button small expanded hollow">Buy</a>
    </div>
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button small expanded hollow">Buy</a>
    </div>
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button small expanded hollow">Buy</a>
    </div>
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button small expanded hollow">Buy</a>
    </div>
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button small expanded hollow">Buy</a>
    </div>
    <div class="column">
        <img class="thumbnail" src="http://placehold.it/300x400">
        <h5>Nulla At Nulla Justo, Eget</h5>
        <p>$400</p>
        <a href="#" class="button small expanded hollow">Buy</a>
    </div>
</div>
<hr>

<div class="row">
    <div class="medium-4 columns">
        <h4>Top Products</h4>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
    </div>
    <div class="medium-4 columns">
        <h4>Top Products</h4>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
    </div>
    <div class="medium-4 columns">
        <h4>Top Products</h4>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
        <div class="media-object">
            <div class="media-object-section">
                <img class="thumbnail" src="http://placehold.it/100x100">
            </div>
            <div class="media-object-section">
                <h5>Nunc Eu Ullamcorper Orci</h5>
                <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>
            </div>
        </div>
    </div>
</div>

<div class="callout large secondary">
    <div class="row">
        <div class="large-4 columns">
            <h5>Vivamus Hendrerit Arcu Sed Erat Molestie</h5>
            <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit.</p>
        </div>
        <div class="large-3 large-offset-2 columns">
            <ul class="menu vertical">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
            </ul>
        </div>
        <div class="large-3 columns">
            <ul class="menu vertical">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

slick.js

$(document).on('ready turbolinks:load', function(){
    alert("worked");
    $('.product-slider').slick({
        dots: true,
        arrows: true,
        prevArrow: $('.prev'),
        nextArrow: $('.next')
    });
});

【问题讨论】：

我知道这不能回答你的问题，但是，这是我的两分钱......禁用 Turbolinks，它有很多已知问题，而且很少值得麻烦。
酷 - 我以前完全这样做过，这次想解决它，因为我喜欢活泼！如果我今天想不通，我肯定会删除它

标签： javascript ruby-on-rails turbolinks

【解决方案1】：

您是否尝试过获取以下脚本标签

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

进入你的 application.html.erb？我在部分中添加脚本标签时遇到了问题。

【讨论】：

我确实试过了——你建议把它放在哪个部分？我把它放在下面和部分
你能不能把它加到结束标签的上面，看看它是否有效，
我最终将它添加到 body 标记的下方，并且它起作用了...见下文

【解决方案2】：

我必须在准备好的文档中包含 .off()，否则事件绑定会堆积起来。

这段代码在部分的底部：

<script type="text/javascript">
    $(document).off().on('ready turbolinks:load',function(){MyGlobal.slickInit();});
</script>

这是我定义 MyGlobal.slickInit();

// $(document).on('ready turbolinks:load', function(){
// });

MyGlobal.slickInit = function(){
    alert("worked");
    $('.product-slider').slick({
        dots: true,
        arrows: true,
        prevArrow: $('.prev'),
        nextArrow: $('.next')
    });
}

然后我搬家了：

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

到application.html.erb的底部，见下图：

    <!DOCTYPE html>
    <html>
    <head>
        <title>MySite</title>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
        <%= csrf_meta_tags %>
    <link href='https://fonts.googleapis.com/css?family=Candal' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>


</head>
<body>
    <!-- <div class="appWrap"> -->

        <%= render 'refills/centered_navigation' %>
        <div class="wrapper-for-content-outside-of-footer">
            <!-- Uncomment this whole section for a sticky footer. The content of the page should be inside of this .wrapper-for-content-outside-of-footer -->
            <%= yield %>
        </div>
        <%= render '/refills/footer_2' %>


    <!-- </div> -->

</body>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

</html>

【讨论】：