Raty.js無法加載一次無限滾動發生在導軌中

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'); 

      }); 
     } 
    ); 

    });