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

Question

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

3

我想知道为什么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

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

- malexanders

1

我知道这并不能回答你的问题，但是这是我的建议...禁用Turbolinks，因为它有很多已知的问题，而且很少值得麻烦。 - Anthony E

酷 - 我以前完全做过这个，这次想解决它，因为我喜欢它的灵敏度！如果我今天无法弄清楚，我肯定会将其删除。 - malexanders

2个回答

0

你尝试过获取以下脚本标签吗？

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

你想把它放到你的application.html.erb文件中吗？我曾经在局部视图中添加脚本标签时遇到过问题。

- torresomar

我确实尝试过 - 您建议将其放在哪个部分？我将其放在<body>下面，也放在<head>部分中。 - malexanders

你能否将它添加到</body>结束标签的上方，然后查看是否有效？ - torresomar

我最终将它添加到了body标签的下方，然后它就起作用了...请参见下文。 - malexanders

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- malexanders · Accepted Answer

我不得不在文档就绪时包括 .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>