rails 4 上具有砌体效果的意外行为

Question

我受到 Makenzie Child video and github repo 的启发，在我的 rails 应用程序上创建了砌体效果。

我有一个小问题，当我访问该页面时，行为不是预期的，所有的框都在彼此下面，如果我重新加载它们会采取良好的行为...我希望当我们到达页面时，可能会显示良好的行为。

我什么都不知道javascript请不要生我的气:)

这是progresses.js.coffee

$ ->
  $('#progresses').imagesLoaded ->
    $('#progresses').masonry
      itemSelector: '.box'
      isFitWidth: true

application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require masonry/jquery.masonry
//= require turbolinks
//= require_tree .

views/progresses/index.html.slim

.container
  .section
    .row
       .col-xs-12
        h1.text-gold 
          |Work In Progress  [
          = @progresses.count 
          | ]
  hr
  #progresses.transitions-enabled
    - @progresses.each do |progress|
      .box.panel.panel-default
        = link_to (image_tag progress.main_image.url), progress
        .panel-body
          h4.text-gold = progress.title.upcase
          h5 = progress.date
          small = truncate(progress.content, length: 150)

感谢您的帮助，

问候

Answer 1

当您重新加载页面时它起作用的事实让我怀疑这是一个 turbolinks 问题。

Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.

因此您将在应用程序中使用 link 访问该页面，javascript 不会重新加载。但是，当您在页面上进行刷新时，会再次获取所有内容，包括导致脚本执行的 javascript。

解决方案 1

这也意味着像 $(document).ready(function(){ 之类的东西将不起作用，因为它只在初始加载时触发。尝试这样的事情：

ready = ->

  $('#progresses').imagesLoaded ->
  $('#progresses').masonry
    itemSelector: '.box'
    isFitWidth: true

$(document).on('page:load', ready)

我假设您使用的是 rails 4，这在 rails 5 中不起作用。我已经使用以下问题获取信息，并且描述了一些方法可以做到这一点在 rails 5: Rails 4: how to use $(document).ready() with turbo-links

Turbolinks 将在加载新页面时触发 page:load 事件。

解决方案 2

另一个解决方案可能是使用 jquery-turbolinks gem.

使用起来很方便。将 gem 'jquery-turbolinks' 添加到您的 gem 文件。然后将 //= require jquery.turbolinks 添加到您的 application.js。这个有在 //= require jquery 和 //= require jquery_ujs 之间。所以在你的情况下：

//= require jquery
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require jquery_ujs
//= require masonry/jquery.masonry
//= require turbolinks
//= require_tree .

如果其中任何一个都不起作用，您可能需要暂时禁用 turbolinks，看看 turbolinks 是否真的是问题所在。您可以通过将 application.html.erb 中的 <body> 标记替换为以下内容来做到这一点： <body data-no-turbolink="true"> 请注意，您不需要为整个应用程序禁用 turbolinks会要的有针对特定页面禁用它的干净解决方案。

编辑

如果以下解决方案适合您，您可以试试这个，而不是我在 解决方案 1 中给出的代码：

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

在我看来，这要干净得多，而且我读到它应该适用于 rails 4.2 及更高版本。注意区别：turbolinks:load 而不是 page:load.

Answer 2

所以我开始使用

ready = ->

  $('#progresses').imagesLoaded ->
    $('#progresses').masonry 
      itemSelector: '.box'
      isFitWidth: true

$(document).on('turbolinks:load', ready)

正如我在第一条评论中提到的那样，我的框被重叠了，因为我错过了行中的缩进 $('#progresses').masonry 现在它完美地工作再次感谢大家

rails 4 上具有砌体效果的意外行为

Unexpected behavior with masonry effect on rails 4

ruby-on-rails

coffeescript

jquery-masonry

ruby-on-rails-4

解决方案 1

解决方案 2