javascript - Rails 中发生无限滚动后 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');

          });
        }
      );

    });