Masonry Jquery in Rails - doesn't work without refreshing the page

问题

I am currently following John Elder's book about building Pintinterest clone using Ruby on Rails.The problem is that Masonry Grid Layout works only when I refresh the page. When I click the link to the list of pins, everything goes to the left side.

I tried to fix turbolinks, coffee script, application.js but I gave up after three days.

This is my github: https://github.com/Gelin1984/Imager2018

This is my Heroku App: https://imager2018.herokuapp.com/

Coffee Script:

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

application.js

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

application.css

   *= require 'masonry/transitions'
   *= require_tree .
   *= require_self
  */

index.html

<div id="pins" class="transitions-enabled">
     <% @pins.each do |pin| %>

      <div class="box">
        <div class="panel panel-default">
        <%= link_to image_tag(pin.image.url(:medium)),pin %><br/>
          <div class="panel-body">
          <%= pin.description %><br/><br/>
          </div>

           <% if pin.user == current_user %>
             <div class="panel-footer">
              <%= link_to 'Edit', edit_pin_path(pin) %>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
              <%= link_to 'Destroy', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
             </div>
          <% end %>
        </div>
      </div>
    <% end %>
</div>
<div class="center">
  <%=  will_paginate @pins, renderer: BootstrapPagination::Rails %>

gemfile

https://rubygems.org'
ruby '2.5.0'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

gem 'jquery-rails'
gem 'rails', '~> 5.1.4'

gem 'puma', '~> 3.7'
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
gem 'devise', '~> 4.4', '>= 4.4.1'
gem 'uglifier', '>= 1.3.0'
gem 'therubyracer', platforms: :ruby
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks'
gem 'jbuilder', '~> 2.5'
gem 'jquery-turbolinks'
gem 'paperclip', '~> 5.2', '>= 5.2.1'
gem 'masonry-rails', '~> 0.2.4' 
gem 'will_paginate', '~> 3.1', '>= 3.1.6'
gem 'will_paginate-bootstrap', '~> 1.0', '>= 1.0.1'
group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
  gem 'sqlite3', '~> 1.3.13'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :production do
  gem 'pg', '~> 0.20'
end

Thank you so much for any hints !

Blockquote

回答1:

I'm not sure how well supported jquery.turbolinks is for recent versions of Turbolinks, so you may wish to try the following:

$(document).on 'turbolinks:load', ->
  $('#pins').imagesLoaded ->
    $('#pins').masonry
      itemSelector: '.box'
      isFitWidth: true

来源：https://stackoverflow.com/questions/50998903/masonry-jquery-in-rails-doesnt-work-without-refreshing-the-page

标签

jquery

ruby-on-rails

ruby

jquery-masonry

turbolinks