在 Rails 中发生无限滚动时，Raty.js 不会加载

Posted 2023-05-09

【中文标题】在 Rails 中发生无限滚动时，Raty.js 不会加载

【英文标题】：Raty.js not loading once infinite scroll occurs in Rails

【发布时间】：2015-04-25 07:15:01

【问题描述】：

我正在使用Masonry-rails 中的无限滚动选项，并正在通过Raty.js 实施评级系统。当前几个 pin 出现时，会显示平均评分，但是，无限滚动后，新 pin 没有平均评分。附上我的 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
                %divclass: "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 );
          );
        
      );

    );

【参考方案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');

          );
        
      );

    );