为什么Turbolinks无法正常工作？ Rails app

Question

wondering why turbolinks isn't working properly...driving me nuts. 想知道为什么turbolinks工作不正常......让我疯狂。 When I refresh the page everything works fine. 刷新页面时一切正常。 However, navigating to a page for the first time, the javascript doesn't load properly. 但是，第一次导航到页面时，javascript无法正确加载。 See slick.js below for reference. 请参阅下面的slick.js以供参考。

When navigating to any page for the first time. 第一次导航到任何页面时。
- alert pops up before page actually renders 在页面实际呈现之前弹出警报
- javascript features fail javascript功能失败
When navigating back to page that I have already been too in the current session. 导航回到我当前会话中已经过的页面时。 The contents of body clearly loads before the alert pops up, and the javascript features work as expected. 在弹出警报之前，主体内容会明显加载，并且javascript功能会按预期工作。

Any ideas? 有任何想法吗？ Please let me know if you need more information, I believe I included the important files below. 如果您需要更多信息，请告诉我，我相信我在下面列出了重要文件。 Thanks! 谢谢！

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

application.js 的application.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 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 _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 slick.js

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

Answer 1

I had to include .off(), in my document ready, otherwise the event bindings were piling up. 我必须在我的文档中包含.off（），否则事件绑定就会堆积起来。

This code is at the bottom of a partial: 此代码位于部分的底部：

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

This is when I am defining MyGlobal.slickInit(); 这是我定义MyGlobal.slickInit（）的时候;

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

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

And I moved: 我感动：

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

To the bottom of application.html.erb, see below: 在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>

Answer 2

Have you tried getting the following script tag 您是否尝试过获取以下脚本标记？

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

into your application.html.erb? 进入你的application.html.erb？ I've had issues with adding script tags within partials. 我在部分内容中添加脚本标记时遇到了问题。

为什么Turbolinks无法正常工作？ Rails app

问题描述

2 个解决方案

解决方案1
1 2016-05-11 23:10:36

解决方案2
0 2016-05-11 22:38:49

为什么Turbolinks无法正常工作？ Rails app

问题描述

2 个解决方案

解决方案1 1 2016-05-11 23:10:36

解决方案2 0 2016-05-11 22:38:49

解决方案1
1 2016-05-11 23:10:36

解决方案2
0 2016-05-11 22:38:49