Question

我使用Kaminari，Masonry和Infinite Scroll的附加组件。我得到了无限滚动的砖石，但每次我进入页面并看到项目列表，它再次渲染相同的项目至少25次，给我650列出的项目，当只有26。我的代码是下面我问的问题是为什么会发生这种情况？

items_controller.rb

  def index
    @items = Item.order("created_at DESC").page(params[:page])
  end

index.html.erb

<div id='items-ctnr' class='row'>
  <div class='infinite-scroll page clearfix'>
    <%= render @items %>
  </div>
</div>

<nav id="page-nav">
  <%= paginate @items %>
</nav>

index.js.erb的

$("#items-ctnr").append("<div class='infinite-scroll page clearfix'><%= escape_javascript(render(@items)) %></div>");

_items.html.erb

<% @items.each do |item| %>
  <div class='item box'>
    <div class='name'>
      <%= link_to item.name, item %>
    </div>
  </div>
<% end %>

items.js

$(function(){

  var $container = $('#items-ctnr, #user-items-ctnr');

  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.box',
      columnWidth: function( containerWidth ) {
        return containerWidth / 6;
      }
    });
  });

  $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 items to load.',
        img: '/assets/masonry/loader.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

在index.js.erb中，我认为您还需要更新#page-nav阻止，因为您现在使用ajax提供新数据但不更改分页块。

这样的事情：

index.js.erb的：

$("#items-ctnr").append("<div class='infinite-scroll page clearfix'><%= escape_javascript(render(@items)) %></div>");
$("#page-nav").replaceWith("<nav id='page-nav'><%= escape_javascript(paginate(@items)) %></nav>");

Answer 2

好的问题是两个@items变量渲染了每个变量，因此我猜测它在两者之间呈现了几次，直到它出现了日志没有发现的内部错误。可能是一些我不熟悉的铁轨倒退。

好吧，到目前为止，当我删除项目partial中的变量时，这是有效的：

_items.html.erb

<% @items.each do |item| %>
<% end %>

并将索引代码保存在同一个地方：

 <div class='infinite-scroll page clearfix'>
    <%= render @items %>
 </div>

了解render和@items如何运作的新内容。

使用Kaminari和Masonry时显示相同的结果

2 个答案: