砌体对铁轨的影响的意外行为 4答案

【问题标题】：Unexpected behavior with masonry effect on rails 4砌体对铁轨的影响的意外行为 4
【发布时间】：2016-08-31 05:53:22
【问题描述】：

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

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

我不知道任何 javascript 请不要生我的气:)

这是progresses.js.coffee

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

应用程序.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)

感谢您的帮助，

问候

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-4 coffeescript jquery-masonry

【解决方案1】：

当你重新加载页面时它可以工作的事实让我怀疑这是一个 turbolinks 问题。

Turbolinks 使您的网络应用程序中的链接更快。它不会让浏览器在每个页面更改之间重新编译 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 是否真的是问题所在。您可以通过将application.html.erb 中的<body> 标记替换为以下内容来做到这一点：<body data-no-turbolink="true"> 请注意，您不需要为整个应用程序禁用涡轮链接。有一些干净的解决方案可以为特定页面禁用它。

编辑

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

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

  ...your javascript goes here...

});

在我看来，这要干净得多，而且我读过它应该可以在 rails 4.2 及更高版本上工作。注意区别：turbolinks:load 而不是page:load。

【讨论】：

感谢您花时间回答我！我尝试了所有方法，实际上它可以这样做：ready = -> $('#progresses').imagesLoaded -> $('#progresses').masonry itemSelector: '.box' isFitWidth: true $(document).on('turbolinks:load', ready) 但我有一个新问题......我的盒子现在重叠了......
$(document).on('turbolinks:load') 在 Rails 6 上为我工作

【解决方案2】：

所以我去和它一起工作

ready = ->

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

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

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

【讨论】：

这对我有用。我相信这将是 Rails 5 的正确答案。