Raty.js не загружается после бесконечного прокрутки в Rails

Question

Я использую бесконечный параметр прокрутки от Masonry-rails и внедряю систему рейтинга через Raty.js. Когда появляются первые несколько контактов, средний рейтинг показывается, однако после бесконечной прокрутки новые контакты не имеют средних оценок. Прикреплен мой index.html.haml. Как разрешить raty.js показывать средние оценки на новых выводах из бесконечного прокрутки?

Вот ссылка на мой сайт ступенчатого: http://instapin.herokuapp.com/ (прокрутите вниз до нижней части)

index.html.haml:

#pins.transitions-enabled.infinite-scroll 
    - @pins.each_with_index do |pin, i| 
    .box.panel.panel-default 
     = link_to (image_tag pin.image.url), pin 
     .panel-body 
      %h2= link_to pin.title, pin 
      %p.user 
      Submitted by 
      = link_to pin.user.name, user_path("id" => pin.user.id) 
     .panel-footer 
      .btn-group.pull-left 
       %div{class: "srating", dscore: @avg_reviews[i] } 
      .btn-group.pull-right 
       - if user_signed_in? 
        - if current_user.voted_for? pin 
         = link_to unlike_pin_path(pin), method: :put, class: "btn btn-default vote", data: { type: :json } do 
          %span.glyphicon.glyphicon-heart 
           =pin.get_upvotes.size 
        - else 
         = link_to like_pin_path(pin), method: :put, class: "btn btn-default vote", data: { type: :json } do 
          %span.glyphicon.glyphicon-heart 
           =pin.get_upvotes.size 
       - else 
        = link_to like_pin_path(pin), method: :put, class: "btn btn-default" do 
         %span.glyphicon.glyphicon-heart 
          =pin.get_upvotes.size 
    #page-nav.container 
    = will_paginate @pins, renderer: BootstrapPagination::Rails, previous_label: "Newer", next_label: "Older", class: "paginate" 

    :javascript 
    $('.srating').raty({ 
     path: '/assets/', 
     readOnly: true, 
     score: function() { 
      return $(this).attr('dscore'); 
     } 
    }); 
    $(function(){ 

     var $container = $('#pins'); 

     $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.box', 
      columnWidth: 10 
     }); 
     }); 

     $container.infinitescroll({ 
     navSelector : '#page-nav', // selector for the paged navigation 
     nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '.box',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pins', 
      img: 'http://i.imgur.com/6RMhx.gif' 
      } 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
      // hide new items while they are loading 
      var $newElems = $(newElements).css({ opacity: 0 }); 
      // ensure that images load before adding to masonry layout 
      $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
      }); 
     } 
    ); 

    }); 

Answer 1

Я решил, что этот вопрос. Мне нужно было добавить raty.js для загрузки после бесконечного прокрутки. В результате javascript должен быть:

:javascript 
    $('.srating').raty({ 
     path: '/assets/', 
     readOnly: true, 
     score: function() { 
      return $(this).attr('dscore'); 
     } 
    }); 
    $(function(){ 

     var $container = $('#pins'); 

     $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.box', 
      columnWidth: 10 
     }); 
     }); 

     $container.infinitescroll({ 
     navSelector : '#page-nav', // selector for the paged navigation 
     nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '.box',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pins', 
      img: 'http://i.imgur.com/6RMhx.gif' 
      } 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
      // hide new items while they are loading 
      var $newElems = $(newElements).css({ opacity: 0 }); 
      // ensure that images load before adding to masonry layout 
      $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
        $('.srating').raty({ 
     path: '/assets/', 
     readOnly: true, 
     score: function() { 
      return $(this).attr('dscore'); 
     } 
    }); 
      $('.srating').raty('reload'); 

      }); 
     } 
    ); 

    });