jQuery Масонство не рендеринг Rails 3 Один месяц рельсов

Question

У меня есть ben пытается реализовать jQuery масонство, и он не работает.

Это ошибка, и в консоли браузера это сказано.

Uncaught TypeError: Object [объект Object] не имеет какого-либо метода 'imagesLoaded'

Масонство в Vendor/assest/JavaScripts

Хорошо здесь мои файлы.

skills.js.coffee:

jQuery -> 
    $('#skills_page').imagesLoaded -> 
    $('#skills_page').masonry itemSelector: ".box" 

index.html.haml

.container 
    #skills_page 
    = render @skills 

= will_paginate @skills 

custon.css.scss

.box { 
    background-color: #fff; 
    width: 214px; 
    margin: 5px; 
    float: left; 
    -webkit-box-shadow: 1px 100px 6px rgba(0, 0, 0, .375); 
    -moz-box-shadow: 1px 100px 6px rgba(0,0,0,.375); 
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .375); 
    display: block; 

} 
.box img { 
    diplay: block; 
    width: 100%; 

} 

.description { 
    margin: 10px 0 5px; 
} 

_skill.html.haml

.box 
    .pin_container 
    - if skill.image.file? 
     .pin_image_bkg= image_tag(skill.image(:long)) 
    - else 
     .pin_image_bkg= image_tag "214by70.png" 
    - if skill.user.profile_pic.file? 
     .pin_image= image_tag(skill.user.profile_pic(:medium), :style => "-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-bottom-right-radius: 7px;-webkit-border-bottom-left-radius: 7px;-moz-border-radius-bottomright: 7px;-moz-border-radius-bottomleft: 7px;") 
    - else 
     .pin_image= image_tag("default_avatar.png", :style => "-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-bottom-right-radius: 7px;-webkit-border-bottom-left-radius: 7px;-moz-border-radius-bottomright: 7px;-moz-border-radius-bottomleft: 7px;") 
    .pin_btn= link_to 'View', skill, :class => "btn" 
    .pin_subtitle 
    Help Package from 
    =link_to "#{skill.user.name}" , skill.user 
    .pin_title 
    =link_to "#{skill.title}", skill 
    .mini_info 
    -unless skill.work_hrs.blank? 
     .left 
     .mini_hours= skill.work_hrs 
     .left 
     .mini_title W 
    -unless skill.meeting_hrs.blank? 
     .left 
     .mini_hours= skill.meeting_hrs 
     .left 
     .mini_title M 
     .clear 

Вот что мои скрипты выглядеть при просмотре исходного кода страницы :)

<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.masonry.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script> 
<script src="/assets/applications.js?body=1" type="text/javascript"></script> 
<script src="/assets/pages.js?body=1" type="text/javascript"></script> 
<script src="/assets/password_resets.js?body=1" type="text/javascript"></script> 
<script src="/assets/skills.js?body=1" 

Answer 1

Так получается наш это был глупый один :)

В моих приложениях раскладка я имел это в bottome:

 :plain 

     <!-- jQuery via Google + local fallback, see h5bp.com --> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

     <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script> 

     <!-- Bootstrap jQuery Plugins, compiled and minified --> 

     <script src="js/bootstrap.min.js"></script>  

    :plain 

     <script src="http://code.jquery.com/jquery.js"></script> 

     <script src="js/bootstrap.min.js"></script> 

И это сломало все :)

Удалено, и все было хорошо :)

Извините, что задал глупый вопрос!

Answer 2

Проверьте ваш application.js файл

ли JQuery называют там?

Ваш application.js файл (по активам) должен выглядеть как этот http://screencast.com/t/CwM2FRlGaVs

Answer 3

Если JQuery работает должным образом, то это выглядит как кладка плагин не загружается правильно, следовательно, «недоступен метод» ошибка. Я собрал базовый fiddle here ... sans coffescript, и он работает правильно.

Обязательно включите jQuery, а затем плагин масонства.

JS/JQuery должен выглядеть примерно так:

$(document).ready(function() { 

    var $skills_page = $('#skills_page'); 

    $skills_page.imagesLoaded(function() { 
     $skills_page.masonry({ 
      // options 
      itemSelector: '.box', 
      columnWidth: 200 
     }); 
    }); 

});