网格视图不在rails中工作

Question

我真的很喜欢rails，我正在通过创建一个网络应用程序来教我自己，现在我正在构建一个像网络应用程序一样的pintrest。

一切都很好，但我希望引脚处于网格视图中。为此，我尝试使用masonry-rails Gem。但它似乎不起作用。

我的索引文件

<link href="/assets/lposts.css.scss" rel="stylesheet">
<link href="/assets/pins.js.coffee" rel="javascript">
<div class="transitions-enabled" id="pins">
  <% @posts.each do |post| %>
    <div class="box panel panel-default">
      <%= link_to (image_tag post.picture.url), post %>
      <h2>
        <%= link_to post.title, post %>
      </h2>
      <p class="user">
        Submitted by
        UserName
      </p>
    </div>
  <% end %>
</div>

我的css文件

body {
    background: #E9E9E9;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
}

nav {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
    .navbar-brand {
        a {
            color: #BD1E23;
            font-weight: bold;
            &:hover {
                text-decoration: none;
            }
        }
    }
}

#pins {
  margin: 0 auto;
  width: 100%;
  .box {
      margin: 10px;
      width: 350px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
      border-radius: 7px;
      text-align: center;
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 22px;
        margin: 0;
        padding: 25px 10px;
        a {
                color: #474747;
        }
      }
      .user {
        font-size: 12px;
        border-top: 1px solid #EAEAEA;
            padding: 15px;
            margin: 0;
      }
    }
}

#edit_page {
    .current_image {
        img {
            display: block;
            margin: 20px 0;
        }
    }
}

#pin_show {
    .panel-heading {
        padding: 0;
    }
    .pin_image {
        img {
            max-width: 100%;
            width: 100%;
            display: block;
            margin: 0 auto;
        }
    }
    .panel-body {
        padding: 35px;
        h1 {
            margin: 0 0 10px 0;
        }
        .description {
            color: #868686;
            line-height: 1.75;
            margin: 0;
        }
    }
    .panel-footer {
        padding: 20px 35px;
        p {
            margin: 0;
        }
        .user {
            padding-top: 8px;
        }
    }
}

textarea {
    min-height: 250px;
}

我的js文件

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

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

在我的application.scss中

*= require 'masonry/transitions'

在我的application.js中

//= require masonry/jquery.masonry

Answer 1

你包含js资产的方式是错误的。

请使用包含js文件

<%= javascript_include_tag 'pins' %>

并将pins.js.coffee文件放在预编译的assests路径中

Rails.application.config.assets.precompile += %w(articles.js)

您可以将资产放在application.js中

//= require pins

希望这对你有用。