Question

我被Makenzie Child video和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 .

视图/进展/ 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可以更快地在您的Web应用程序中建立以下链接。它不是让浏览器在每个页面更改之间重新编译JavaScript和CSS，而是使当前页面实例保持活动状态，并仅替换头部中的正文和标题。

因此，您将使用应用程序中的链接访问该页面，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'添加到您的gemfile中。然后将//= 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是否确实存在问题。您可以使用以下代码替换<body>中的application.html.erb代码来执行此操作：<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行的缩进现在它完美无缺再次感谢所有

在轨道上产生砌体效应的意外行为4

2 个答案:

解决方案1

解决方案2

在轨道上产生砌体效应的意外行为4

2 个答案:

解决方案1 ​​

解决方案2

解决方案1