jQuery masonry 不适用于 Rails
Posted
技术标签:
【中文标题】jQuery masonry 不适用于 Rails【英文标题】：jQuery masonry is not working with rails 【发布时间】：2018-06-07 14:22:45 【问题描述】：我正在尝试在 Rails 应用程序中使用 jQuery masonry 实现过渡效果，因为我使用 masonry-rails gem i 一切进展顺利，但砌体效果不起作用。 我的索引文件
<link href="/assets/lposts.css.scss" rel="stylesheet">
<link href="/assets/lposts.js.coffee" rel="javascript">
<div class="transitions-enabled" id="lposts">
<% @lposts.each do |lpost| %>
<div class="box panel panel-default">
<%= link_to (image_tag lpost.picture.url), lpost %>
<h2>
<%= link_to lpost.tittle, lpost %>
</h2>
<p class="user">
Submitted by
<%= link_to lpost.location, lpost %>
<center><%= link_to lpost.Contact, lpost %></center>
</p>
</div>
<% end %>
</div>
在我的 gemfile 中，我添加了 masonry-rails gem
gem 'masonry-rails', '~> 0.2.4'
在我的 application.js 文件中
// This is a manifest file that'll be compiled into application.js
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// Put JS file that applies to all pages under initializations directory, which
// will get required in init.js.
//
// Put JS file that only applies to a specific page under pages directory, which
// will get required in page_specific.js.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require masonry/jquery.masonry
//= require medium-editor
//= require handlebars
//= require jquery-sortable
//= require jquery.ui.widget
//= require jquery.iframe-transport
//= require jquery.fileupload
//= require medium-editor-insert-plugin
//= require index.min
//= require taggle
//= require jquery.autoSave
//= require pubsub
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
//= require init
//= require page_specific
在我的 application.scss 文件中
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*= require 'masonry/transitions'
*/
// Use @import to import all Sass files, instead of using sprocket require.
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
在我的 lpost.js.coffee 中
# 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
【问题讨论】：
【参考方案1】：您的 application.html 中有以下代码吗？
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
【讨论】：
以上是关于jQuery masonry 不适用于 Rails的主要内容，如果未能解决你的问题，请参考以下文章
ajaxSetup 不适用于 Rails / jquery-ujs