Question

我目前正在关注John Elder的有关使用Ruby on Rails构建Pintinterest克隆的书。问题是Masonry Grid Layout仅在刷新页面时有效。当我单击指向引脚列表的链接时，所有内容都移到左侧。

我试图修复涡轮链接，咖啡脚本，application.js，但是三天后我放弃了。

这是我的github：https://github.com/Gelin1984/Imager2018

这是我的Heroku应用程序：https://imager2018.herokuapp.com/

咖啡脚本：

$ ->
  $('#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

非常感谢您的提示！

Blockquote

Answer 1

我不确定最新版本的Turbolinks是否对jquery.turbolinks提供良好的支持，因此您不妨尝试以下操作：

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

Rails中的Masonry Jquery-不刷新页面就无法工作

1 个答案: