Question

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

第一次导航到任何页面时。
- 警告会在页面实际呈现之前弹出
- javascript功能失败
导航回我当前会话中已经过的页面。在弹出警报之前，主体内容会明显加载，并且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

的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

<!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')
    });
});

Answer 1

我必须在我的文档中包含.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>

Answer 2

您是否尝试过以下脚本标记

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

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

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

2 个答案: