代码之家 › 专栏 › 技术社区 › user6124553

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

jquery-masonry coffeescript ruby-on-rails-4 ruby-on-rails

user6124553 · 技术社区 · 8 年前

我被Makenzie Child检查过 video 和 github repo 在我的rails应用程序上创建砖石效果。

我有一个小问题,当我访问页面时,行为不是预期的,所有框都在其他框的下方,如果我重新加载,它们会采取良好的行为……我希望当我们到达页面时,良好的行为可以显示出来。

我不懂javascript,请不要生我的气:)

这是progresses.js.coffee

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

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

views/progress/index.html.slim视图/进度/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)

谢谢你的帮助,

当做

2 回复 | 直到 8 年前

Community Justin Hirsch 7 年前

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

page:load 加载新页面时发生的事件。

解决方案2

另一个解决方案可能正在使用 jquery-turbolinks 宝石

它很容易使用。添加 gem 'jquery-turbolinks' //= require jquery.turbolinks 有在两者之间 //= require jquery 和 //= require jquery_ujs 因此,在您的情况下:

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

您可以通过替换 <body> 在您的 application.html.erb 具有以下功能: <body data-no-turbolink="true"> 请注意,禁用整个应用程序的turbolinks并不是您想要的。有一些干净的解决方案可以针对特定页面禁用它。

编辑

如果以下解决方案对您有效,您可以尝试使用此解决方案,而不是我提供的代码 解决方案1 :

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

  ...your javascript goes here...

});

在我看来,这是非常干净的,我已经读到它应该在rails4.2及以上版本中工作。注意区别: turbolinks:load 而不是 页面:加载 .

user6124553 user6124553 8 年前

所以我去工作

ready = ->

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

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

正如我在第一次评论中提到的,我的箱子被重叠了,因为我没有看到行上的缩进 $('#progresses').masonry 现在它工作得很好再次感谢大家